Cara Memperluas Grid Dengan CSS dan Javascript

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 13, 2021

Di bawah ini kita akan mempelajari cara membuat layout grid yang meluas dengan CSS dan JavaScript.

Memperluas Grid

Klik pada kotak untuk “expand” (100% lebarnya):

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* Grid: Tiga kolom sama yang mengapung di samping satu sama lainr */
.column {
  float: left;
  width: 33.33%;
  padding: 50px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
  color: white;
}

.containerTab {
  padding: 20px;
  color: white;
}

/* Hapus floats setelah columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Tombol yang dapat ditutup di dalam container tab */
.closebtn {
  float: right;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
</style>
</head>
<body>

<div style="text-align:center">
  <h2>Expanding Grid</h2>
  <p>Klik pada kotak di bawah:</p>
</div>

<!-- tiga columns -->
<div class="row">
  <div class="column" onclick="openTab('b1');" style="background:#483D8B;">
    Box 1
  </div>
  <div class="column" onclick="openTab('b2');" style="background:#696969;">
    Box 2
  </div>
  <div class="column" onclick="openTab('b3');" style="background:#228B22;">
    Box 3
  </div>
</div>

<!-- Full-width columns: (disembunyikan secara default) -->
<div id="b1" class="containerTab" style="display:none;background:#483D8B">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <h2>Box 1</h2>
  <p>Contoh grid yang diperluas menggunakan CSS dan Javascript!</p>
</div>

<div id="b2" class="containerTab" style="display:none;background:#696969">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <h2>Box 2</h2>
  <p>Contoh grid yang diperluas menggunakan CSS dan Javascript!</p>
</div>

<div id="b3" class="containerTab" style="display:none;background:#228B22">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <h2>Box 3</h2>
  <p>Contoh grid yang diperluas menggunakan CSS dan Javascript!</p>
</div>

<script>
function openTab(tabName) {
  var i, x;
  x = document.getElementsByClassName("containerTab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";
}
</script>

</body>
</html>

Buat Grid Yang Luas

Langkah 1) Tambahkan HTML:
Contoh

<!--  grid: tiga columns -->
<div class="row">
  <div class="column" onclick="openTab('b1');" style="background:#483D8B;">Box 1</div>
  <div class="column" onclick="openTab('b2');" style="background:#696969;">Box 2</div>
  <div class="column" onclick="openTab('b3');" style="background:#228B22;">Box 3</div>
</div>

<!-- The expanding grid (disembunyikan secara default) -->
<div id="b1" class="containerTab" style="display:none;background:#483D8B">
  <!-- Jika ingin kemampuan untuk menutup containernya, tambahkan tombol tutup -->
  <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
  <h2>Box 1</h2>
  <p>Lorem ipsum..</p>
</div>

<div id="b2" class="containerTab" style="display:none;background:#696969">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
  <h2>Box 2</h2>
  <p>Lorem ipsum..</p>
</div>

<div id="b3" class="containerTab" style="display:none;background:#228B22">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
  <h2>Box 3</h2>
  <p>Lorem ipsum..</p>
</div>

Langkah 2) Tambahkan CSS:
Buat tiga kolom:
Contoh

/* Grid: Tiga kolom sama yang mengapung di samping satu sama lainr */
.column {
  float: left;
  width: 33.33%;
  padding: 50px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
  color: white;
}

.containerTab {
  padding: 20px;
  color: white;
}

/* Hapus floats setelah columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Tombol yang dapat ditutup di dalam container tab */
.closebtn {
  float: right;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

Langkah 3) Tambahkan JavaScript:
Contoh

// Sembunyikan semua elemen dengan class = "containerTab", kecuali yang cocok dengan kolom petak yang dapat diklik
function openTab(tabName) {
  var i, x;
  x = document.getElementsByClassName("containerTab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";
}