CSS · Bab 7
Grid
Menyusun tata letak dua dimensi dengan display grid, menentukan kolom memakai grid-template-columns, satuan fr, dan repeat, memberi jarak dengan gap, merentangkan item, serta membuat kartu responsif dengan auto-fit dan minmax.
Flexbox menyusun item dalam satu arah. Grid menyusun item dalam dua arah sekaligus: baris dan kolom. Grid cocok untuk tata letak halaman dan galeri kartu buku, sedangkan flexbox cocok untuk deretan item seperti navigasi. Keduanya sering dipakai bersama.
7.1 display: grid dan grid-template-columns
display: grid dipasang pada induk, dan grid-template-columns menentukan lebar setiap kolom. Item diletakkan otomatis dari kiri ke kanan, baris demi baris. Baris baru dibuat sendiri bila item lebih banyak dari jumlah kolom. Tinggi baris bisa diatur dengan grid-template-rows, tetapi biasanya dibiarkan mengikuti isi.
Belum ada output.
gap di grid memberi jarak antarbaris dan antarkolom. Bisa juga terpisah: row-gap dan column-gap.
7.2 Satuan fr dan repeat()
Satuan fr (fraction) membagi sisa ruang setelah kolom berukuran tetap dan gap diperhitungkan. 1fr 2fr membuat kolom kedua dua kali lebar kolom pertama. repeat(4, 1fr) adalah cara singkat menulis 1fr 1fr 1fr 1fr.
Mengapa tidak 25%? Persentase dihitung dari lebar wadah tanpa memperhitungkan gap, sehingga empat kolom 25% ditambah tiga celah akan meluber keluar wadah. fr tidak punya masalah itu.
🧪 Coba ubah: ganti repeat(4, 1fr) menjadi repeat(4, 25%), lalu perhatikan deretan rak meluber melewati tepi kanan wadah.
Belum ada output.
7.3 Merentangkan Item: grid-column
Garis-garis grid diberi nomor mulai dari 1 di tepi kiri. Dengan grid-column, sebuah item bisa merentang beberapa kolom:
grid-column: span 2: merentang dua kolom dari tempatnya.grid-column: 1 / -1: dari garis pertama sampai garis terakhir (-1), yaitu selebar grid.grid-row: span 2bekerja dengan cara yang sama untuk baris.
Belum ada output.
7.4 Kartu Responsif: auto-fit dan minmax()
Pola berikut membuat grid kartu yang menyesuaikan lebar layar tanpa media query:
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));minmax(180px, 1fr): setiap kolom minimal 180px, dan boleh melebar mengisi sisa ruang.auto-fit: browser membuat kolom sebanyak yang muat. Makin lebar wadah, makin banyak kolom; di wadah yang sempit tinggal satu.auto-fillmirip, tetapi kolom kosong tetap disisakan. Bila jumlah kartu sedikit,auto-fillmembiarkan ruang kosong di kanan, sedangkanauto-fitmelebarkan kartu yang ada untuk mengisinya.
Bila wadah lebih sempit dari batas minimal (180px), kolom akan meluber. Versi yang aman memakai min(): kolom minimal 180px, atau selebar wadah bila wadah lebih sempit. Itulah yang dipakai contoh berikut.
🧪 Coba ubah: hapus lima kartu sehingga tinggal dua, lalu bandingkan auto-fit dengan auto-fill. Bedanya baru terlihat bila preview cukup lebar untuk tiga kolom atau lebih (sekitar 564px ke atas); kalau tidak, coba di berkasmu sendiri.
Belum ada output.
7.5 Ringkasan
- Grid untuk tata letak dua arah, flexbox untuk satu arah.
display: grid+grid-template-columnsmenentukan kolom.gapmemberi jarak.frmembagi sisa ruang dan memperhitungkangap.repeat()menyingkat kolom yang sama.grid-column: span ndangrid-column: 1 / -1merentangkan item.repeat(auto-fit, minmax(min(…, 100%), 1fr))membuat kartu responsif tanpa media query.