CSS GridLesson 86Preview gratis
Grid 12-column Layout
Lesson ini bagian dari CSS · Semua level
Ringkasan
Sistem 12 kolom adalah pola populer: lebar halaman dibagi menjadi 12 trek sama besar sehingga komposisi blok bisa dikombinasikan dengan bebas, misalnya 6+6, 4+8, atau 3+9. Dengan CSS Grid, sistem ini dibuat menggunakan `repeat(12, 1fr)` dan kelas yang menentukan lebar setiap blok. Di layar sempit, kolom dapat diubah menjadi satu penuh agar konten tetap terbaca.
Poin kunci
- `grid-template-columns: repeat(12, 1fr)` membuat 12 kolom sama lebar
- Kelas seperti `.col-6` mengatur `grid-column: span 6` untuk mengisi setengah baris
- `gap` memberi jarak antar kolom sehingga blok tidak menempel
- Di breakpoint kecil, blok diubah menjadi `span 12` (satu kolom penuh)
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.