CSS Grid
CSS Grid Layout adalah sistem tata letak halaman berbasis kisi-kisi (grid) dua dimensi terkuat yang disediakan secara bawaan oleh CSS modern, mempermudah pembuatan desain web responsif tanpa perlu memakai framework eksternal.
1. Analogi Lemari Sekat Kotak
Bayangkan Anda memiliki lemari laci penyimpanan besar dengan sekat kotak-kotak (misalnya 4 kolom menyamping dan 3 baris ke bawah):
Anda bebas menaruh dasi di laci baris 1 kolom 2, menaruh handuk besar yang memakan ruang 2 kolom menyamping di tengah, atau menggantung jas panjang yang memakan 2 baris ke bawah di kolom kanan. Lemari sekat ini memberikan kebebasan mutlak mengatur koordinat tata letak benda.
2. CSS Grid (Dua Dimensi) vs Flexbox (Satu Dimensi)
- CSS Grid: Bekerja pada baris dan kolom secara bersamaan (dua dimensi). Sangat cocok untuk merancang arsitektur layout makro suatu halaman web (beranda portal berita, tata letak dashboard admin kompleks).
- Flexbox: Bekerja pada satu arah saja (baris mendatar saja ATAU kolom tegak saja). Sangat cocok untuk susunan mikro komponen kecil (menyusun menu-menu sejajar di dalam navbar, menyusun tombol sejajar di card).
?
Uji Pemahaman Mandiri
Manakah dari pernyataan berikut yang membedakan CSS Grid dengan Flexbox secara tepat?
A. CSS Grid adalah sistem layout dua dimensi (baris & kolom), sedangkan Flexbox adalah satu dimensi
B. Flexbox memerlukan framework Bootstrap, sedangkan CSS Grid tidak
C. CSS Grid hanya berfungsi pada browser Google Chrome saja
