Grid Dasar: Baris dan Kolom

Kapan pakai Grid?

Flexbox hebat buat satu dimensi (satu baris atau satu kolom). Grid dirancang buat dua dimensi: baris DAN kolom yang sejajar sekaligus. Kalau kamu butuh layout halaman (header, sidebar, konten, footer) atau galeri yang rapi, Grid jawabannya.

Menyalakan Grid

.wadah {
  display: grid;
}

Seperti flex, anak langsung otomatis menjadi item. Bedanya, tanpa definisi kolom/rows, setiap item menempati satu baris penuh.

Mendefinisikan kolom dan baris

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

Artinya: 3 kolom (kolom pertama tetap 200px, dua sisanya berbagi ruang) dan 2 baris (baris pertama 80px, kedua mengikuti konten). Item otomatis mengisi sel dari kiri ke kanan, atas ke bawah.

Satuan fr: fraction

fr = pecahan dari sisa ruang yang tersedia. Ini satuan paling ajaib di Grid.

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

Total 4 bagian: kolom tengah dapat 2/4 (setengah), kolom tepi masing-masing 1/4. Tidak perlu menghitung persen manual, dan gap otomatis diperhitungkan (beda dengan persen yang sering kelebihan lebar karena gap).

repeat() biar tidak capek nulis

/* 12 kolom sama lebar */
.wadah {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

/* 4 kolom, tiap 200px */
.galeri {
  display: grid;
  grid-template-columns: repeat(4, 200px);
}

Grid responsif tanpa media query

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

Ini pola legendaris: minmax(220px, 1fr) berarti tiap kolom minimal 220px dan boleh melar. auto-fill mengisi baris dengan kolom sebanyak yang muat. Hasilnya galeri yang otomatis menyesuaikan jumlah kolom dengan lebar layar, tanpa satu pun media query.

Catatan teknis: bedakan auto-fill dan auto-fit. Keduanya mengisi kolom sebanyak muatnya, tapi kalau ruang tersisa, auto-fill membiarkan kolom kosong (menyisakan celah), sedangkan auto-fit melebarkan kolom yang ada menutupi ruang kosong. Untuk galeri penuh, auto-fit biasanya terlihat lebih bagus.

Contoh: layout halaman klasik

.halaman {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 48px;
  min-height: 100vh;
}

Sidebar 240px + konten fleksibel, header 64px + footer 48px. Layout admin dashboard selesai dalam 6 baris.

Rangkuman

Grid mengatur dua dimensi sekaligus. Definisikan kolom/rows dengan grid-template, pakai fr buat berbagi ruang, repeat() buat menulis ringkas, dan pola auto-fill minmax buat galeri responsif otomatis. Kalau Flexbox itu "barisan", Grid itu "tabel yang fleksibel".