GridLesson 310Preview gratis
3 Column Layout
Lesson ini bagian dari How To · Semua level
Ringkasan
Tata letak tiga kolom membagi konten menjadi tiga bagian sejajar, sering dipakai untuk daftar fitur, layanan, atau artikel. CSS Grid dengan repeat(3, 1fr) membuat ketiga kolom sama lebar secara otomatis. Agar tetap nyaman di ponsel, jumlah kolom dikurangi melalui media query atau dengan pola auto-fit.
Poin kunci
- repeat(3, 1fr) membuat tiga kolom dengan lebar sama
- Gunakan gap untuk jarak yang konsisten antarkolom
- Media query dapat menurunkan jumlah kolom pada layar kecil
- repeat(auto-fit, minmax(220px, 1fr)) membuat kolom menyesuaikan otomatis
- Hindari menaruh terlalu banyak teks dalam satu kolom sempit
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.