CSS Grid: Membangun Tata Letak Dua Dimensi

Di artikel sebelumnya, kita lihat Flexbox menata elemen dalam satu arah saja — entah sederet ke samping, entah sebaris ke bawah. Tapi sering kali kamu butuh dua-duanya sekaligus: kisi kartu, halaman yang terbagi jadi header, sidebar, dan area konten, atau galeri foto dengan baris dan kolom yang rapi. Itu sudah masuk ranah dua dimensi, dan di situlah CSS Grid main.

Grid adalah alat penataan paling kuat yang dimiliki CSS. Kalau Flexbox cuma mikir dalam satu garis, Grid mikir dalam bentuk tabel utuh berisi baris dan kolom yang kamu tentukan sendiri, lalu kamu tinggal mengisinya. Kedengarannya ribet, padahal dasar-dasarnya gampang banget diikuti. Yuk, kita coba bikin beberapa grid.

Ide inti: baris dan kolom

Sama seperti Flexbox, Grid bekerja pada satu container beserta item-item di dalamnya. Sebuah elemen kamu ubah menjadi grid container lewat display: grid, lalu kamu tentukan berapa kolom yang kamu mau (dan kalau perlu, barisnya juga):

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

grid-template-columns: 200px 200px 200px artinya “bikin tiga kolom, masing-masing selebar 200px.” Item-itemnya otomatis mengisi grid ini — tiga yang pertama menempati baris pertama, lalu yang keempat turun ke baris berikutnya. Kamu cukup menyiapkan kerangkanya, dan urusan menempatkan item biar Grid yang kerjakan.

Satuan fr: kolom yang lentur

Menuliskan lebar dalam piksel yang tetap itu terlalu kaku. Untungnya Grid punya satuan khusus untuk masalah ini: fr, singkatan dari “fraction”, alias bagian dari ruang yang tersisa. Dengan fr, kolom-kolom bisa berbagi ruang container secara luwes:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Hasilnya tiga kolom berukuran sama yang bareng-bareng memenuhi seluruh container, berapa pun lebar layarnya — masing-masing kebagian satu bagian ruang yang merata. Kamu juga bebas mengatur proporsinya:

grid-template-columns: 1fr 2fr;   /* kolom kedua dua kali lebih lebar dari yang pertama */

Bahkan kamu bisa menggabungkan yang tetap dengan yang luwes:

grid-template-columns: 250px 1fr;  /* sidebar tetap 250px, konten mengisi sisanya */

Yang terakhir ini contoh tata letak halaman yang sudah klasik: sidebar dengan lebar tetap, lalu area konten yang mengambil sisa ruang yang ada. Satuan fr inilah yang bikin tata letak Grid bisa menyesuaikan diri dengan mulus di berbagai ukuran layar.

repeat() untuk banyak kolom

Begitu kamu butuh banyak kolom yang ukurannya sama, menuliskan 1fr 1fr 1fr 1fr mulai terasa merepotkan. Nah, fungsi repeat() siap mengerjakannya buat kamu:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* empat kolom berukuran sama */
}

repeat(4, 1fr) artinya “empat kolom, masing-masing 1fr” — sama persis dengan menulis 1fr 1fr 1fr 1fr, cuma jauh lebih ringkas. Cara inilah yang biasa dipakai untuk membuat grid yang rapi, misalnya galeri foto atau deretan kartu produk.

Celah antar item grid

Sama seperti di Flexbox, Grid juga punya property gap untuk mengatur jarak antar item — dan di Grid rasanya malah lebih pas, karena sekaligus mengatur celah di antara baris maupun kolom:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Itu memberi celah 20px yang konsisten di antara tiap baris dan kolom. Kalau kamu mau jarak yang berbeda untuk masing-masing arah, atur saja terpisah lewat row-gap dan column-gap. Nggak perlu lagi repot menambah margin satu per satu di tiap item — cukup gap, semua beres dengan rapi.

Kisi kartu yang nyata

Sekarang kita bikin sesuatu yang langsung kepakai: kisi kartu responsif yang otomatis menampung sebanyak mungkin kolom sesuai lebar layar yang tersedia. Polanya memang sedikit lebih rumit, tapi manfaatnya besar:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

Kelihatannya padat, jadi kita bedah pelan-pelan. minmax(250px, 1fr) artinya “tiap kolom minimal selebar 250px, tapi boleh melar untuk mengisi ruang yang ada.” Sedangkan auto-fit artinya “muat sebanyak mungkin kolom selama masih cukup nyaman.” Digabungkan, keduanya menghasilkan grid yang menampilkan, misalnya, empat kartu di layar lebar, dua di tablet, dan satu di ponsel — semua berjalan otomatis, tanpa tambahan kode sedikit pun. Satu baris ini termasuk pola tata letak paling berguna di CSS modern, jadi sayang kalau dilewatkan.

Mendefinisikan baris juga

Sampai sini kita baru menentukan kolom, dan membiarkan baris muncul otomatis. Padahal kamu juga bisa menentukan baris secara eksplisit lewat grid-template-rows, caranya sama persis:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 200px;
}

Hasilnya grid 2×2 dengan baris pertama yang pendek dan baris kedua yang lebih tinggi. Menentukan baris dan kolom sekaligus itulah yang membuat Grid benar-benar dua dimensi — kamu jadi menyusun tabel sel yang utuh, bukan cuma sederet item.

Grid vs Flexbox: mana yang dipakai?

Sekarang kamu sudah punya dua alat penataan, jadi wajar kalau muncul pertanyaan: kapan pakai yang mana? Ini patokan sederhananya:

• Flexbox untuk satu dimensi — satu baris atau satu kolom. Pakai untuk navbar, toolbar, menengahkan elemen, dan sederet item yang perlu diberi jarak atau dibungkus ke baris berikutnya.
• Grid untuk dua dimensi — baris dan kolom sekaligus. Pakai untuk tata letak halaman, kisi kartu, galeri, dan apa pun yang memang berbentuk kisi sel.

Penutup

CSS Grid memberi kamu kendali penuh atas tata letak dua dimensi:

• Pasang display: grid pada container, lalu tentukan kolomnya lewat grid-template-columns.
• Satuan fr membagi ruang secara luwes (1fr 1fr = dua kolom sama besar; 250px 1fr = sidebar tetap + konten yang fleksibel).
• repeat(n, 1fr) bikin banyak kolom seragam dengan ringkas.
• gap memberi jarak yang konsisten antar baris dan kolom.
• repeat(auto-fit, minmax(250px, 1fr)) menghasilkan kisi kartu responsif yang menyesuaikan diri dengan lebar layar.
• grid-template-rows menentukan baris secara eksplisit untuk tata letak 2D yang penuh.
• Pakai Flexbox untuk satu dimensi, Grid untuk dua dimensi — dan sering kali keduanya dipakai bareng.

Berbekal Flexbox dan Grid, pada dasarnya kamu bisa menyusun hampir semua tata letak yang ada di kepalamu. Tinggal satu langkah terakhir: memastikan tata letak itu tetap rapi di segala ukuran layar — dari monitor lebar sampai layar ponsel. Itulah bahasan artikel CSS pamungkas kita: desain responsif, di mana media query membuat tata letakmu menyesuaikan diri dengan perangkat apa pun yang dipakai pengunjung.