Bagaimana membuat: Layout kolom campuran

Belajar cara menggunakan CSS untuk membuat grid layout kolom campuran.

Belajar cara membuat layout kolom responsif yang dapat berubah di antara empat kolom, dua kolom, dan kolom penuh lebar menurut lebar layar.

Tembuskan ukuran jendela browser untuk melihat efek responsif:

Coba sendiri

Bagaimana membuat layout kolom campuran

Tahap pertama - Tambahkan HTML:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Tahap kedua - Tambahkan CSS:

Dalam contoh ini, kita akan membuat tata letak empat kolom, yang akan berubah menjadi dua kolom di layar dengan lebar kurang dari 900 paksi. Namun, di layar dengan lebar kurang dari 600 paksi, kolom akan berlapis, bukan berurut.

/* Membuat empat kolom yang sama lebar, sehingga mereka bergerak bersama */
.column {
  float: left;
  width: 25%;
}
/* Menghapus floating */
.row:after {
  content: "";
  display: table;
   clear: both;
}
/* Layout responsif - Mengubah tata letak menjadi dua kolom daripada empat kolom */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* Layout responsif - Membuat dua kolom berlapis, bukan berurut */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Coba sendiri

Halaman yang berhubungan

Panduan:Tata letak situs web CSS

Panduan:Rancang web responsif CSS