Section ini membahas css grid sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.

# Pengenalan CSS Grid

Kenali CSS Grid sebagai sistem layout dua dimensi, masalah yang diselesaikannya di samping Flexbox, dan peta perjalanan section ini.

Buka → # Grid Container dan Grid Items

Pelajari dua peran utama dalam CSS Grid — container yang mendefinisikan grid dan items yang menempatinya — beserta kosakata line, track, cell, dan area.

Buka → # Grid Template Columns

Definisikan kolom grid dengan grid-template-columns — dari track piksel tetap hingga mencampur beberapa unit dalam satu deklarasi.

Buka → # Grid Template Rows

Atur tinggi baris grid dengan grid-template-rows, pahami baris auto untuk baris yang tidak didefinisikan, dan cara tinggi baris mengikuti konten.

Buka → # Satuan fr

Kuasai satuan fr — pembagi ruang bebas grid — beserta perbandingannya dengan persen dan jebakan overflow yang harus kita kenali.

Buka → # Fungsi repeat()

Ringkaskan daftar track yang berulang dengan fungsi repeat() — dari pola sederhana hingga pengulangan grup track dalam satu deklarasi.

Buka → # Fungsi minmax()

Beri batas bawah dan atas pada track dengan minmax() — dari pola sidebar yang beradaptasi hingga resep minmax(0, 1fr) anti-overflow.

Buka → # Auto-Fill dan Auto-Fit

Rakit kisi kartu responsif dalam satu baris dengan repeat(auto-fit, minmax()) — dan pahami perbedaan halus auto-fill versus auto-fit.

Buka → # Gap dan Alignment pada Grid

Atur jarak antar track dengan gap dan kuasai enam properti alignment Grid — dari perataan item dalam sel hingga distribusi track dalam container.

Buka → # Grid Column dan Grid Row

Kendalikan posisi item grid dengan nomor garis, kata kunci span, dan garis negatif.

Buka → # Grid Template Areas

Gambar layout halaman sebagai denah teks bernama dengan grid-template-areas, lalu definisikan ulang untuk layar sempit.

Buka → # Implicit dan Explicit Grid

Bedakan track explicit buatan kita dan track implicit buatan browser, lalu atur keduanya dengan grid-auto-rows dan grid-auto-flow.

Buka → # Nested Grid

Jadikan grid item sebagai grid container sendiri, lalu kenali subgrid untuk menyelaraskan isi antar kartu.

Buka → # Pola: Responsive Card Grid

Rakit deretan kartu produk yang jumlah kolomnya menyesuaikan lebar layar tanpa satu media query pun.

Buka → # Pola: Layout Sidebar dan Konten

Bangun layout dua kolom klasik dengan minmax, buat sidebar sticky, dan tumpukkan keduanya di layar sempit.

Buka → # Pola: Layout Dashboard

Gabungkan named areas, auto-fit, dan penempatan garis menjadi halaman dasbor yang utuh.

Buka → # Memilih Grid

Susun kerangka keputusan untuk memilih antara CSS Grid dan Flexbox pada setiap komponen.

Buka →