07
grid-cols-*gap-*col-span-*
Grid Layout
Layout dua dimensi: grid-cols, gap, kolom dinamis, dan col-span untuk tile istimewa.
Grid 2D, gap, & span
grid-cols-* membagi kontainer menjadi kolom sama lebar, gap-* memberi jarak antar sel tanpa margin negatif. Satu tile bisa menyeberangi kolom dengan col-span-* — pola kartu unggulan di katalog materi situs ini.
Grid 2D, gap, & span live
col-span-2
1
2
3
4
col-span-2
Kapan memilih grid?
Gunakan grid ketika item harus sejajar dua dimensi: katalog kartu, dashboard, galeri. Untuk navbar, footer, atau deretan tombol, flexbox lebih sederhana.
Decision Rule
Grid untuk katalog/dashboard yang sejajar; flex untuk baris alat dan navbar.