Home » How To » Cara Membuat Column Layout Campuran

Cara Membuat Column Layout Campuran

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Di bawah ini kita akan mempelajari cara membuat column layout campuran dengan CSS.

Kita akan membuat column layout responsif yang bervariasi antara 4 kolom, 2 kolom,dan kolom lebar penuh bergantung pada lebar layar.

Ubah ukuran jendela browser untuk melihat efek responsif:

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

/* Buat empat kolom yang sama yang mengapung di samping satu sama lain */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

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

/* Responsive layout - membuat tata letak dua kolom, bukan empat kolom */
@media screen and (max-width: 900px) {
  .column  {
    width: 50%;
  }
}

/* Responsive layout - membuat dua kolom bertumpuk satu sama lain, bukan di samping satu sama lain */
@media screen and (max-width: 600px) {
  .column  {
    width: 100%;
  }
}
</style>
</head>
<body>

<h2>Column Layout Campuran</h2>
<p>Ubah ukuran jendela browser untuk melihat efek responsif (kolom akan mengatur ulang tata letaknya dari empat menjadi dua pada layar yang lebarnya kurang dari 900 piksel. <b> Namun </b>, pada layar yang lebarnya kurang dari 600 piksel, kolom akan menumpuk di atas satu sama lain alih-alih mengambang di samping satu sama lain.)</p>

<div class="row">
  <div class="column" style="background-color:#DC143C;">
  <h2>Column 1</h2>
  <p>Contoh teks</p>
  </div>
  <div class="column" style="background-color:#FFFF00;">
  <h2>Column 2</h2>
  <p>Contoh teks</p>
  </div>
  <div class="column" style="background-color:#ADFF2F;">
  <h2>Column 3</h2>
  <p>Contoh teks</p>
  </div>
  <div class="column" style="background-color:#1E90FF;">
  <h2>Column 4</h2>
 <p>Contoh teks</p>
  </div>
</div>

</body>
</html>

Cara Membuat Column Layout Campuran

Langkah 1) Tambahkan HTML:
Contoh

<div class="row">
  <div class="column" style="background-color:#800000;">
  <h2>Column 1</h2>
  <p>Contoh teks</p>
  </div>
  <div class="column" style="background-color:#FFFF00;">
  <h2>Column 2</h2>
  <p>Contoh teks</p>
  </div>
  <div class="column" style="background-color:#ADFF2F;">
  <h2>Column 3</h2>
  <p>Contoh teks</p>
  </div>
  <div class="column" style="background-color:#1E90FF;">
  <h2>Column 4</h2>
 <p>Contoh teks</p>
  </div>
</div>

Langkah 2) Tambahkan CSS:
Dalam contoh ini, kita akan membuat layout empat kolom yang akan berubah menjadi dua kolom pada layar yang lebarnya kurang dari 900 piksel. Namun, pada layar yang lebarnya kurang dari 600px, kolom akan menumpuk satu sama lain dan tidak aka bersebelahan.
Contoh

/* Buat empat kolom yang sama yang mengapung di samping satu sama lain */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

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

/* Responsive layout - membuat tata letak dua kolom, bukan empat kolom */
@media screen and (max-width: 900px) {
  .column  {
    width: 50%;
  }
}

/* Responsive layout - membuat dua kolom bertumpuk satu sama lain, bukan di samping satu sama lain */
@media screen and (max-width: 600px) {
  .column  {
    width: 100%;
  }
}

You may also like