CSS Grid 1: Dasar Kolom & Baris

Flexbox vs Grid

Flexbox menata satu dimensi (satu baris atau satu kolom). CSS Grid menata dua dimensi sekaligus: baris dan kolom. Grid cocok untuk kerangka halaman, galeri, dan dasbor; Flexbox cocok untuk komponen kecil seperti navbar atau deretan tombol. Keduanya sering dipakai bersamaan.

Membuat grid

.galeri {
  display: grid;
  grid-template-columns: 200px 200px 200px;   /* tiga kolom */
  gap: 16px;
}

Anak langsung dari .galeri otomatis menjadi grid item, mengisi sel dari kiri ke kanan lalu turun ke baris berikutnya. Baris dibuat otomatis sesuai jumlah item.

Satuan fr (fraction)

fr adalah satuan khusus Grid: satu bagian dari sisa ruang. Inilah yang membuat grid fleksibel:

grid-template-columns: 1fr 1fr 1fr;    /* tiga kolom sama lebar */
grid-template-columns: 2fr 1fr;        /* kolom pertama dua kali lebih lebar */
grid-template-columns: 250px 1fr;      /* sidebar tetap + konten fleksibel */

repeat(): menyingkat pengulangan

grid-template-columns: repeat(3, 1fr);       /* sama dengan 1fr 1fr 1fr */
grid-template-columns: repeat(4, 100px);
grid-template-columns: 200px repeat(2, 1fr);

Baris, gap, dan perataan

Menengahkan dengan grid

.tengah {
  display: grid;
  place-items: center;
  height: 200px;
}

Dua baris saja sudah cukup untuk menengahkan sesuatu secara horizontal dan vertikal.

Garis grid

Grid dibangun dari garis bernomor mulai dari 1. Tiga kolom punya empat garis vertikal. Garis-garis ini dipakai untuk menempatkan item secara presisi (dibahas di bab berikutnya).