How To

Cara Memperluas Grid Dengan CSS dan Javascript

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" >default) -->
<div id="b1" class="containerTab" style="display:none;background:#483D8B">
  <span >menggunakan CSS dan Javascript!</p>
</div>

<div id="b2" class="containerTab" style="display:none;background:#696969">
  <span >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" >

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";
}

Hanifah Nurbaeti

Share
Tags: CSSHow Tojavascript