Grid: Penguasa Ruang 2 Dimensi
Flexbox itu luar biasa, tapi ia hanya bisa memikirkan satu arah dalam satu waktu: menyusun ke samping
(baris) atau menyusun ke bawah (kolom). Bagaimana jika kita ingin membangun sebuah struktur halaman
utuh yang rumit? Seperti ada sidebar di kiri, header di atas, konten di tengah, dan area kosong di kanan?
Selamat datang di CSS Grid Layout. Grid adalah sistem palet berpetak dua dimensi paling
mutakhir yang disediakan CSS. Ia mampu menyusun Baris (Row) dan Kolom (Column) secara bersamaan!
🥊 Flexbox vs Grid: Kapan Menggunakan Apa?
Jangan buang Flexbox! Mereka berdua diciptakan untuk saling bekerja sama. Flexbox mengatur isi kotak (1D), sedangkan Grid membagi-bagi denah peta rumah (2D).
Menyusun ke 1 Arah (Flexbox)
Cocok untuk: Menu Navigasi, List Icon, Kumpulan Tombol.
Menyusun ke 2 Arah (Grid)
Cocok untuk: Layout Website Utama, Galeri Foto Puzzel, Dashboard Admin.
🏗️ Membuat Cetakan Palet (Langkah 1)
Sama seperti Flexbox, semua aksi dimulai dengan memberikan mantra pada Bapak (Container): display: grid;.
Setelah itu, kita harus mendefinisikan "Seberapa banyak kolom dan seberapa panjang petaknya?" menggunakan
grid-template-columns.
display: grid;
/* Kita minta lantai ini dibagi menjadi 3 kolom:
Kolom 1 lebarnya 100px. Kolom 2 200px. Kolom 3 100px. */
grid-template-columns: 100px 200px 100px;
/* Lebar parit / gang antar petak (Mirip Flexbox Gap) */
gap: 10px;
}
🍕 Mengenal Unit Ajaib "fr"
Masalah dari menulis px adalah layarnya tidak akan otomatis menyesuaikan (responsive) jika dibuka lewat HP. Untuk itu, CSS Grid menciptakan satuan sakti baru bernama fr (Fraction / Bagian). Ia berfungsi layaknya memotong adonan pizza secara otomatis.
grid-template-columns: 1fr 1fr 1fr;
"Bagilah layar secara melar menjadi 3 bagian yang sama besar (masing-masing mendapat 1 potong)."
grid-template-columns: 1fr 3fr;
"Bagilah layar menjadi 2 bidang. Area kanan mendapat 3 potong pizza, dan area kiri 1 potong (berarti total ada 4 bidang, bagian kanan menguasai 3/4 layar)."
"Satuan fr secara cerdas akan menghitung sendiri sisa layar yang tersedia (setelah dikurangi gap parit dan padding). Kamu tidak perlu pusing menghitung matematika 100% dibagi rata."
Jalan pintas (Repeat):
grid-template-columns: repeat(4, 1fr)
Itu sama saja dengan kamu mengetik capek-capek: 1fr 1fr 1fr 1fr.
🧱 Span: Memakan Lahan Tetangga (Langkah 2)
Setelah denah dibuat oleh sang Bapak, setiap Anak pada awalnya akan dipaksa menempati 1 ruangan petak (sel) saja. Tetapi, Sang Anak (Item) bisa memberontak dan mengatakan: "Aku ingin menjebol tembok & melebarkan ruanganku sejauh 3 tiang kolom!"
grid-row: span 2;
Bayangkan garis vertikal dan horizontal pembatas antar ruang. Katakan pada anakmu, mau mencaplok (span) berapa kotak?
🎮 Playground: Arsitek Grid
Jadilah sang mandor pembangun tata letak! Atur kolom kerangka (Container) dan lebarkan ruangan tiap warna (Anak) di panel interaktif ini.
Tugas Sang Bapak
Pemberontakan Anak (Span)
Container Box (display: grid;)
📋 Ringkasan Emas Grid
display: grid;.
grid-template-columns
dan grid-template-rows.
grid-column: span 2;
Jika sang anak butuh melebarkan ruangannya memakan sekat pembatas jatah saudaranya.