Bagaimana membuat: Layout kolom campuran
- Halaman sebelumnya Tampilan grid daftar
- Halaman berikutnya Kartu kolom
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:
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%; } }
Halaman yang berhubungan
Panduan:Tata letak situs web CSS
Panduan:Rancang web responsif CSS
- Halaman sebelumnya Tampilan grid daftar
- Halaman berikutnya Kartu kolom