Digital Transformation
CSS Grid (Grid Layout)
TL;DR: CSS Grid adalah modul layout CSS dua dimensi yang memungkinkan kontrol tata letak baris dan kolom secara bersamaan. Berbeda dari Flexbox yang satu dimensi, Grid cocok untuk layout halaman penuh, dashboard, atau galeri yang butuh kerangka jelas.
Apa itu CSS Grid?
CSS Grid adalah sistem layout native CSS yang dirancang untuk halaman dengan struktur dua sumbu. Kamu mendefinisikan kolom dan baris di parent, lalu menempatkan anak elemen ke sel atau area tertentu. Pendekatan ini menghilangkan kebutuhan akan framework grid eksternal seperti Bootstrap grid pada banyak kasus modern.
Analoginya seperti papan catur. Kamu menentukan dulu jumlah kotak (baris dan kolom), lalu menempatkan bidak (komponen) di posisi spesifik. Itu yang membedakannya dari Flexbox yang lebih mirip menyusun barang di rak satu jalur.
Properti Utama
| Properti | Tujuan | Contoh nilai |
|---|---|---|
display: grid | Mengaktifkan grid container | grid, inline-grid |
grid-template-columns | Definisi lebar kolom | repeat(3, 1fr), 200px 1fr |
grid-template-rows | Definisi tinggi baris | auto, minmax(100px, auto) |
gap | Jarak antar sel | 16px, 1rem 2rem |
grid-area | Penempatan item di area tertentu | header, 1 / 2 / 3 / 4 |
grid-template-areas | Layout berbasis nama area | string multi-baris |
Unit fr (fractional unit) sering dipakai untuk membagi ruang sisa secara proporsional, misalnya 1fr 2fr membuat kolom kedua dua kali lebih lebar dari yang pertama.
Kenapa Penting?
Untuk pemilik bisnis Indonesia yang membangun website bisnis berbasis dashboard atau katalog produk, CSS Grid memungkinkan struktur yang stabil di berbagai ukuran layar. Saat membangun Atmo (proyek LMS internal), seluruh shell aplikasi, sidebar, header, konten utama, panel notifikasi, dibangun pakai Grid karena perubahan layout di tablet dan mobile cukup dengan mengubah grid-template-areas, bukan menulis ulang struktur HTML.
Pertanyaan Umum
Kapan saya pilih Grid daripada Flexbox?
Pilih Grid ketika layout punya struktur dua dimensi yang jelas (baris dan kolom), seperti dashboard, halaman artikel dengan sidebar, atau galeri foto. Pilih Flexbox untuk komponen satu jalur seperti navbar atau toolbar.
Apakah CSS Grid aman dipakai sekarang?
Ya. Per 2026, CSS Grid didukung lebih dari 98% browser aktif menurut MDN. Banyak proyek besar sudah pakai Grid sebagai layout utama tanpa fallback.
Istilah Terkait