cssgridlayoutMenengah6 mnt baca

Grid Container

Memulai CSS Grid: display grid, grid-template-columns/rows, fr, dan repeat().

Kenapa grid ada?

Flexbox hebat untuk susunan satu dimensi: sebaris item atau setumpuk item. Tapi halaman web nyata itu dua dimensi: baris DAN kolom sekaligus, seperti tabel, galeri foto, atau layout dashboard. Sebelum grid, orang memaksakan float atau flexbox bersarang yang rumit untuk itu. CSS Grid lahir untuk mengakhiri penderitaan itu: ia mengatur baris dan kolom bersamaan dalam satu wadah.

Analoginya: flexbox seperti antrean orang dalam satu baris (satu dimensi). Grid seperti tempat duduk bioskop: ada nomor baris (A, B, C) dan nomor kursi (1, 2, 3) yang membentuk petak dua dimensi. Kamu bisa menaruh penonton tepat di baris B kursi 5, atau membiarkan mereka mengisi otomatis.

Mengaktifkan grid

css

.galeri {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 150px 150px;
}

Tiga kolom masing-masing 200px, dua baris masing-masing 150px. Anak-anak langsung wadah otomatis mengisi petak dari kiri ke kanan, atas ke bawah.

Satuan fr: pecahan ruang

fr (fraction) membagi ruang sisa secara proporsional, mirip flex: 1 tapi untuk trek grid:

css

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

Kolom tengah mendapat dua kali lebar kolom kiri dan kanan. Tidak perlu menghitung persen manual, dan tidak perlu khawatir soal gap (dibahas di modul grid-gap).

Fungsi repeat()

Daripada menulis 1fr 1fr 1fr 1fr, ringkas dengan repeat:

css

.galeri {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 200px);
}

Bacanya: "ulangi 4 kali, tiap kolom 1fr". Pola ini dipakai di hampir setiap galeri dan dashboard.

Grid implisit vs eksplisit

Trek yang kamu definisikan disebut eksplisit. Kalau item lebih banyak dari petak yang tersedia, grid otomatis membuat baris baru yang disebut implisit. Ukuran baris implisit diatur dengan:

css

.galeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 180px; /* baris tambahan otomatis setinggi 180px */
}

Ini membuat grid tahan terhadap jumlah item yang berubah-ubah, misalnya daftar produk dari database.

Catatan teknis: bedakan grid-template-* (mendefinisikan trek eksplisit) dengan grid-auto-* (mengatur ukuran trek implisit yang dibuat otomatis). Keduanya sering dipakai bersamaan.

Tips profesional

Mulai layout grid dari konten: tentukan dulu berapa kolom yang DIBUTUHKAN konten, baru pilih fr/px/repeat.
grid-template-columns: 240px 1fr adalah pola sidebar + konten paling umum di dashboard.
Untuk debugging grid, aktifkan "Grid overlay" di DevTools untuk melihat garis dan nomor trek.

Rangkuman

Grid = layout dua dimensi (baris + kolom sekaligus). display: grid + grid-template-columns/rows mendefinisikan petak. fr membagi ruang proporsional, repeat() meringkas pola, dan grid-auto-rows menangani item berlebih.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Ubah Denah Bioskop

Memahami grid-template adalah fondasi semua layout 2D. Tanpa ini, galeri dan dashboard mustahil rapi.

Di playground:

Ubah menjadi 4 kolom dengan repeat(4, 1fr), amati item 7 turun ke baris baru otomatis (grid implisit).
Buat kolom pertama dua kali lebih lebar: grid-template-columns: 2fr 1fr 1fr 1fr;.
Di komentar, jelaskan bedanya trek eksplisit dan implisit pada contoh ini.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox