Beberapa tahun lalu, saya mencoba membangun sebuah dashboard. Tidak ada yang istimewa—hanya sidebar tetap, area konten utama, dan footer. Flexbox terasa seperti pilihan yang jelas, dan awalnya, semuanya berjalan lancar. Lalu saya memasukkan satu baris kartu ke bagian utama. Seluruh tata letak langsung berantakan. Saya menghabiskan tiga jam berikutnya bergelut dengan rasio flex-grow dan lebar persentase bersarang, melihat kontainer menolak untuk sejajar tidak peduli seberapa banyak padding yang saya kurangi. Halaman itu terasa seperti menara yang hampir roboh.

Pengalaman pahit itu mengajarkan saya satu hal terpenting tentang tata letak CSS modern: Flexbox dan Grid bukanlah rival. Keduanya adalah alat untuk pekerjaan yang berbeda, dan sebagian besar tata letak yang gagal disebabkan karena menggunakan alat yang salah.

Perbedaannya Ada pada Dimensi

Bayangkan Flexbox sebagai sebuah lorong. Item mengalir dalam satu arah, baik sebagai baris maupun kolom. Ia dirancang untuk distribusi satu dimensi. Browser melihat kontennya, lalu memutuskan bagaimana cara meregangkan, menyusutkan, atau menyelaraskannya di sepanjang satu sumbu tersebut. Hal ini membuat Flexbox sempurna untuk situasi di mana konten menentukan tata letak. Bilah navigasi, tumpukan kolom formulir, atau sekumpulan tag yang membutuhkan spasi yang sama, semuanya duduk secara alami dalam kontainer flex karena mereka berbagi satu logika baris.

Grid, di sisi lain, adalah denah lantai. Ia bersifat dua dimensi secara ketat, menangani baris dan kolom secara bersamaan. Anda menentukan strukturnya terlebih dahulu, baru kemudian menempatkan item di dalamnya. Hal ini membuat Grid ideal untuk arsitektur halaman secara keseluruhan—di mana pun Anda perlu mengontrol posisi vertikal dan horizontal secara bersamaan. Saat Anda mencoba memaksakan desain dua dimensi yang kompleks melalui kontainer Flexbox yang bersarang, Anda akan berakhir dengan markup yang dalam, pembungkus yang rapuh, dan perhitungan matematis yang ringkih yang akan hancur saat Anda menambahkan satu elemen ekstra.

Flexbox Tetap Memiliki Kegunaannya

Jangan terburu-buru mengganti setiap kontainer flex dengan Grid. Di dalam komponen individual, Flexbox sering kali lebih bersih dan lebih jujur. Jika Anda memiliki footer kartu dengan dua tombol dan ingin satu sejajar di kiri dan satu di kanan, justify-content: space-between melakukan persis apa yang Anda maksud. Jika Anda perlu menempatkan ikon secara vertikal di tengah tombol dengan tinggi yang tidak diketahui, align-items: center adalah cara termudah. Konten yang bervariasi—seperti baris lencana pengguna dengan panjang nama yang berbeda—cocok dengan nyaman di dalam Flexbox karena ia bersifat content-first. Kontainernya beradaptasi dengan apa yang dikandungnya.

Grid bersifat container-first. Anda memberi tahu browser berapa banyak jalur (tracks) yang ada dan seberapa besar ukurannya, lalu Anda memasukkan item ke dalam sel-sel tersebut. Jika tata letak Anda sebenarnya hanya satu baris elemen saudara (siblings) yang berbagi ruang, Grid hanya akan menambah kerumitan yang tidak perlu.

Tata Letak Halaman Adalah Ranah Grid

Di sinilah Grid mengambil alih. Ingat mimpi buruk dashboard saya? Inilah seharusnya struktur tersebut terlihat sejak awal:

.page {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
}

.header { grid-row: 1; grid-column: 1 / -1; }
.sidebar { grid-row: 2; grid-column: 1; }
.main { grid-row: 2; grid-column: 2; }
.footer { grid-row: 3; grid-column: 1 / -1; }

Lihat apa yang terjadi. Kontainer .page menetapkan tiga baris dan dua kolom. Baris pertama menyesuaikan ukurannya dengan apa pun yang ada di header berkat auto. Baris tengah mengambil semua sisa ruang yang tersedia dengan 1fr. Footer mendarat di baris terakhir, dengan ukuran sesuai kontennya sendiri. Sementara itu, sidebar terkunci pada lebar 200 piksel, dan area utama mengisi sisanya.

Logika penempatannya adalah kelegaan yang nyata. Header membentang dari garis kolom 1 ke garis -1, yang berarti ia meregang di kedua kolom terlepas dari berapa banyak kolom yang Anda tambahkan nanti. Sidebar dan konten utama berbagi baris 2 tetapi menempati kolom yang terpisah. Footer kembali ke lebar penuh di baris 3. Anda tidak perlu perhitungan persentase pada elemen anak (children). Anda tidak perlu pembungkus bersarang yang berebut tinggi badan. Ubah lebar sidebar di satu tempat, dan area utama akan menyesuaikan secara otomatis. Seluruh tata letak bernapas sebagai satu sistem tunggal.

Keterbacaan dengan grid-template-areas

Untuk kejelasan yang lebih tinggi, Anda dapat menamai bagian-bagian Anda. Alih-alih mengelola nomor baris, Anda menulis peta visual:

.page {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.main { grid-area: main; }

Sekarang lembar gaya (stylesheet) Anda terbaca seperti wireframe. Jika Anda ingin sidebar muncul di sebelah kanan untuk breakpoint yang berbeda, Anda cukup menukar dua kata dalam string template tersebut. Keterbacaan struktural semacam itu mustahil dicapai di dalam tumpukan kontainer flex yang bersarang.

Dua Pelajaran Berharga

Grid bukanlah sihir. Ada dua kesalahan yang akan merusak tata letak Anda dengan cepat.

Yang pertama adalah penggunaan unit yang sembarangan. Jika Anda mendefinisikan grid-template-columns: 1fr 1fr 1fr tetapi desain Anda hanya membutuhkan dua kolom konten, track ketiga tersebut tetap ada. Ia akan tetap kosong dan menciptakan celah yang tidak Anda harapkan, atau ia akan memaksa konten asli Anda terhimpit dengan cara yang merusak desain Anda. Lakukan dengan sengaja. Saat Anda bermaksud membuat dua kolom, tuliskan repeat(2, 1fr).