Section CSS Grid berakhir di chapter ini, dan pertanyaan paling wajar setelah menguasai dua alat layout adalah: kapan memakai yang mana? Jawabannya bukan memilih salah satu untuk selamanya — Grid dan Flexbox berdampingan dalam satu halaman yang sama, masing-masing pada tempatnya. Chapter ini menyusun kerangka keputusan berbasis dimensi, alignment, dan urutan, lalu menutup section dengan satu demo di mana keunggulan dua dimensi Grid terlihat paling jelas.
Satu Dimensi atau Dua Dimensi #
Pertanyaan pertama dan paling menentukan: berapa dimensi yang harus diatur sekaligus?
- Flexbox bekerja content-out: kita menata elemen pada satu sumbu, dan ukuran tiap elemen muncul dari kontennya. Cocok bila susunan mengikuti isi.
- Grid bekerja content-in: kita menggambar baris dan kolom terlebih dahulu, lalu menempatkan elemen ke sel-selnya. Cocok bila bentuk akhir ditentukan desain.
| Pertanyaan | Pilih Flexbox | Pilih Grid |
|---|---|---|
| Elemen disusun satu arah (baris ATAU kolom)? | Cocok | Bisa, dengan deklarasi lebih banyak |
| Baris dan kolom harus sejajar dua arah? | Sulit dicapai | Memang tugasnya |
| Ukuran elemen mengikuti konten? | Perilaku utamanya | Perlu minmax() atau auto |
| Wilayah tetap hasil gambar desain? | Bukan kekuatannya | grid-template-areas |
Alignment dan Urutan #
Dua pertanyaan lanjutan menyaring pilihan sisanya. Pertama, alignment: bila elemen-elemen harus rata terhadap track yang sama pada dua arah — kartu sejajar vertikal dan horizontal sekaligus — Grid adalah jawabannya, karena Flexbox hanya menyelaraskan elemen di dalam satu baris (line) pada satu waktu. Kedua, urutan: kedua alat bisa memisahkan urutan visual dari urutan sumber, Flexbox lewat order dan Grid lewat penempatan eksplisit atau dense. Kebebasan ini berguna, tetapi urutan sumber tetap acuan pembaca layar dan navigasi keyboard; pisahkan keduanya hanya bila urutan visual tidak membawa makna.
Galeri media menyatukan kedua tuntutan itu sekaligus: kolom harus lurus antarbaris, dan setiap baris harus rata atas-bawah. Demo berikut menyusun enam media dengan tinggi gambar dan panjang takarir yang berbeda-beda:
.demo-galeri {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}Dengan flex-wrap, kolom antarbaris tidak berbagi track — dua dimensi seperti ini adalah wilayah milik Grid.
Rekomendasi per Komponen #
| Komponen | Rekomendasi |
|---|---|
| Navigasi horizontal, baris tombol | Flexbox |
| Deretan kartu produk responsif | Grid: repeat(auto-fit, minmax()) |
| Halaman dengan sidebar | Grid |
| Dasbor | Grid untuk kerangka, Flexbox untuk isi kartu |
| Galeri media | Grid |
| Memusatkan satu elemen | Flexbox, atau place-items pada Grid |
Keduanya Bekerja Bersama #
Dalam proyek nyata, pendekatan campuran adalah keadaan normal, bukan pengecualian:
.dasbor {
display: grid;
grid-template-columns: minmax(200px, 240px) 1fr;
}
.kartu-statistik {
display: flex;
flex-direction: column;
justify-content: space-between;
}Grid menggambar kerangka halaman; Flexbox merapikan isi tiap sel. Keduanya berbagi konsep alignment yang sama, sehingga beralih di antara keduanya terasa mulus.
Menutup Section CSS Grid #
Section ini berangkat dari display: grid dan grid-template-columns, melewati fr, repeat(), minmax(), auto-fit, gap dan alignment, lalu naik ke penempatan garis, named areas, implicit grid, nested grid, dan empat pola nyata. Langkah berikutnya adalah section Responsive Web Design: di sana media query dan container query mengubah layout yang sudah kita kuasai agar tetap bekerja di segala ukuran layar — dan Grid, seperti baru saja kita lihat, kadang butuh media query lebih sedikit dari yang kita duga.