Memahami CSS Grid — Panduan Visual Interaktif

Kalau Flexbox adalah layout satu dimensi (horizontal atau vertikal), CSS Grid adalah layout dua dimensi — kamu bisa mengatur baris dan kolom sekaligus. Ini yang membuat Grid sangat powerful untuk page layout, gallery, dashboard, dan struktur halaman yang kompleks.

Coba Langsung

Ubah setiap properti di bawah dan lihat bagaimana grid berubah secara real-time. Perhatikan bagaimana grid-template-columns dan grid-template-rows bekerja sama:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 16px;
}

Konsep Utama CSS Grid

Container vs Item

Sama seperti Flexbox, Grid juga punya dua peran:

• Grid container — elemen parent yang diberi display: grid
• Grid item — elemen anak langsung dari container

/* Container */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* Item - otomatis jadi grid item */
.container > div { }

Satuan fr — Fraction

fr adalah satuan khusus Grid yang membagi ruang tersedia secara proporsional:

Tips: fr mirip seperti flex-grow di Flexbox. 1fr 2fr artinya “bagi ruang jadi 3 bagian — kolom 1 dapat 1, kolom 2 dapat 2”.

gap — Jarak antar item

Satu properti untuk mengatur jarak antar baris dan kolom sekaligus. Jauh lebih bersih daripada margin:

.container {
  gap: 16px;           /* baris dan kolom sama */
  row-gap: 24px;       /* atau atur terpisah */
  column-gap: 12px;
}

Pattern yang Wajib Dihafal

Layout halaman klasik (header, sidebar, main, footer):

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Responsive card grid (tanpa media query!):

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

Ini salah satu pattern paling powerful di CSS — card otomatis wrap ke baris baru saat tidak cukup ruang, tanpa satu pun media query.

Gallery dengan item besar:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.gallery .featured {
  grid-column: span 2;
  grid-row: span 2;
}

Flexbox vs Grid — Kapan Pakai Yang Mana?

Aturan simpel: Kalau layout-nya cuma satu arah, pakai Flexbox. Kalau butuh kontrol baris DAN kolom, pakai Grid. Keduanya bisa dikombinasikan — Grid untuk page layout, Flexbox untuk komponen di dalamnya.

Kesalahan Umum Pemula

1. Pakai Grid untuk segala hal — Grid powerful, tapi Flexbox lebih simpel untuk layout satu dimensi. Jangan pakai Grid kalau Flexbox cukup.
2. Lupa auto-fill vs auto-fit — auto-fill bikin kolom kosong tetap ada, auto-fit melebarkan item untuk mengisi ruang. Untuk card grid responsif, auto-fill biasanya yang kamu mau.
3. Tidak pakai minmax() — repeat(3, 1fr) bagus tapi tidak responsif. repeat(auto-fill, minmax(280px, 1fr)) jauh lebih fleksibel.
4. Bingung grid-template-areas — Ini opsional tapi sangat membantu readability. Pakai untuk page layout, skip untuk grid sederhana.

Langkah Selanjutnya

Setelah paham Grid dan Flexbox, kamu sudah punya fondasi layout yang kuat. Langkah berikutnya: Responsive Design — kombinasi media query, clamp(), dan container query untuk layout yang adaptif di semua ukuran layar.

Di Hyper Sheets, kamu bisa latihan Grid sambil bermain game Kebun Grid — atur tanaman di kebun dengan properti CSS Grid. Dan kalau belum coba, mainkan juga Kodok Flexbox untuk memastikan fondasi Flexbox-mu solid!