CSS Grid

Tata letak dua dimensi dengan baris dan kolom bernama.

Pahami konsepnya

Kalau flexbox menurus satu arah, Grid mengurus dua arah sekaligus: baris DAN kolom dalam satu wadah — sistem tata letak paling kuat yang pernah dimiliki CSS. Wadah diberi display: grid, lalu grid-template-columns mendefinisikan lebarnya: grid-template-columns: 240px 1fr 1fr membangun satu kolom tetap dan dua kolom lentur (fr = fraction, pecahan ruang sisa).

Senjata andalannya repeat() dan minmax(): repeat(3, 1fr) menulis tiga kolom sama lebar dalam sekejap, sedangkan repeat(auto-fit, minmax(220px, 1fr)) adalah mantra responsif — "buat kolom 220px sebanyak yang muat, bagi rata sisanya" — grid yang menyusun sendiri jumlah kolomnya mengikuti lebar layar, tanpa media query. gap mengatur jarak baris-kolom sekaligus.

Elemen anak bisa ditempatkan presisi: grid-column: 1 / 3 membuat kartu membentang dua kolom, grid-area dengan nama (header, sidebar, konten, footer) menggambar cetakan halaman penuh seperti peta. Grid untuk kerangka besar halaman, flexbox untuk isian di dalamnya — duo inilah standar tata letak web masa kini.

Coba contoh kode

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

.galeri .unggulan {
  grid-column: span 2;   /* kartu unggulan dua kolom */
}

Mantra auto-fit + minmax membuat galeri menata diri: layar lebar memuat banyak kolom, layar ponsel menyisakan satu-dua — semuanya otomatis. Kartu berkelas unggulan membentang dua kolom dengan grid-column: span 2. Perkecil jendela browser dan saksikan grid menyusun ulang dirinya tanpa muatan ulang.

Cetakan halaman bernama

.halaman {
  display: grid;
  grid-template-areas:
    "kepala kepala"
    "sisi    isi"
    "kaki    kaki";
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.kepala { grid-area: kepala; }
.sisi   { grid-area: sisi; }
.isi    { grid-area: isi; }
.kaki   { grid-area: kaki; }

grid-template-areas menggambar cetakan halaman seperti peta ASCII: kepala dan kaki membentang penuh, sisi dan isi berbagi baris tengah. Tiap anak tinggal diberi grid-area sesuai namanya — memindah sidebar ke kanan berarti memindah satu kata di peta, bukan menata ulang margin.

Latihan singkat

Bangun galeri auto-fit dengan satu kartu span 2, lalu cetakan halaman lengkap (header/sidebar/isi/footer) dengan template-areas.