Belajar CSS - CSS Grid untuk Layout Dua Dimensi
Episode ini membahas CSS Grid untuk layout dua dimensi: mendefinisikan baris dan kolom dengan grid-template, unit fr dan fungsi repeat, penempatan item dengan grid line, serta area bernama untuk struktur halaman yang jelas.
#Pendahuluan
Flexbox menyelesaikan layout satu dimensi. Namun untuk halaman yang membutuhkan baris dan kolom secara bersamaan — dashboard, galeri, halaman berita — kalian butuh CSS Grid. Grid bekerja pada dua sumbu sekaligus, membagi ruang menjadi track baris dan track kolom. Grid bukan pengganti Flexbox; keduanya saling melengkapi. Aturan praktis: gunakan Flexbox untuk menyusun item dalam satu baris atau kolom, dan Grid untuk struktur dua dimensi di mana item mengisi baris dan kolom secara bersamaan. Mengapa penting? Grid mengurangi kebutuhan banyak class pembungkus dan trik negative margin. Dengan Grid, struktur layout dinyatakan langsung di CSS — lebih mudah dibaca, dipelihara, dan dibuat responsif.
#Membuat Grid: Container dan Track
display: grid pada sebuah elemen menjadikannya grid container. Track kolom didefinisikan dengan grid-template-columns, dan baris dengan grid-template-rows:
.layout {
display: grid;
grid-template-columns: 200px 1fr 1fr;
gap: 16px;
}Kode di atas membuat tiga kolom: yang pertama 200px, dua sisanya membagi sisa ruang secara merata. Nilai fr (fraction) membagi ruang bebas setelah track berukuran tetap dihitung, mirip konsep flex-grow pada Flexbox.
#Repeat dan Auto
Untuk kolom yang seragam, gunakan repeat():
.galeri {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.auto-fill {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}repeat(3, 1fr) membuat tiga kolom sama lebar. Pola auto-fill dengan minmax(180px, 1fr) membuat kolom menyesuaikan diri dengan lebar container — Grid otomatis menambah atau mengurangi jumlah kolom.
#Menempatkan Item dengan Grid Line
Setiap track memiliki grid line sebagai batas. Item bisa ditempatkan dari garis mulai ke garis akhir menggunakan grid-column dan grid-row:
.header {
grid-column: 1 / -1;
}
.sidebar {
grid-column: 1 / 2;
grid-row: 2 / 4;
}
.konten {
grid-column: 2 / -1;
}Nilai 1 / -1 berarti dari garis pertama hingga garis terakhir — item melebar menutupi seluruh baris. -1 merujuk garis paling akhir sehingga cocok dipakai tanpa mengetahui jumlah kolom persisnya.
#Area Bernama
Bila layout makin kompleks, area bernama membuat struktur jauh lebih jelas:
.halaman {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar konten"
"footer footer";
min-height: 100vh;
gap: 12px;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.konten {
grid-area: konten;
}
.footer {
grid-area: footer;
}grid-template-areas mendeskripsikan tata letak seperti peta teks. Setiap baris string mewakili satu baris grid; nama yang sama diulang menandakan item melebar. Struktur seperti ini sangat mudah dibaca dan diubah.
#Alignment dan Gap pada Grid
Grid memakai properti perataan yang sama dengan Flexbox, tetapi berlaku pada dua sumbu sekaligus:
.grid {
display: grid;
grid-template-columns: repeat(3, 120px);
justify-content: center;
align-content: center;
height: 100vh;
gap: 16px;
}justify-content dan align-content merapikan seluruh grup track dalam container. Untuk meratakan item di dalam sel masing-masing, gunakan justify-items dan align-items.
.sel {
justify-items: stretch;
align-items: start;
}Nilai default stretch membuat item memenuhi sel. Mengubah menjadi start atau center memberi kendali posisi item di dalam selnya.
#Latihan: Halaman Berita Sederhana
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid Berita</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="halaman">
<header class="header">Berita Hari Ini</header>
<aside class="sidebar">Topik Populer</aside>
<main class="konten">
<article class="kartu">Artikel utama</article>
<article class="kartu">Artikel kedua</article>
<article class="kartu">Artikel ketiga</article>
</main>
<footer class="footer">Hak cipta 2026</footer>
</div>
</body>
</html>* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; }
.halaman { display: grid; grid-template-columns: 220px 1fr; grid-template-areas: "header header" "sidebar konten" "footer footer"; min-height: 100vh; gap: 12px; padding: 12px; }
.header, .sidebar, .konten, .footer { padding: 16px; border-radius: 8px; }
.header { grid-area: header; background-color: #0f172a; color: white; }
.sidebar { grid-area: sidebar; background-color: #e2e8f0; }
.konten { grid-area: konten; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kartu { background-color: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 16px; }
.footer { grid-area: footer; background-color: #f1f5f9; }Jalankan npx serve . dan perhatikan bagaimana area bernama menata header, sidebar, konten, dan footer. Grid bersarang di dalam konten menciptakan kartu yang otomatis menyesuaikan jumlah kolom dengan ruang yang tersedia.
#Kesalahan Umum dan Solusinya
#Item Menumpuk di Satu Sel
Tanpa penempatan eksplisit, Grid mengalirkan item mengikuti urutan. Bila dua item menumpuk, cek apakah grid-column atau grid-row bentrok, atau gunakan area bernama agar tidak ambigu.
#Repeat dengan Unit Campuran
repeat(3, minmax(180px, 1fr)) bekerja, tetapi repeat(2, 1fr 2fr) juga valid. Hindari mencampur fr dengan nilai tetap tanpa alasan agar proporsi tetap bisa diprediksi.
#Grid dan Flexbox Salah Kaprah
Grid tidak menggantikan Flexbox untuk menyusun item dalam satu baris dengan perataan penuh. Pakai Grid untuk dua dimensi, Flexbox untuk satu dimensi — jangan memaksakan salah satunya.
#Penutup
Inti yang harus dibawa pulang:
- Grid adalah model layout dua dimensi; Flexbox adalah satu dimensi.
grid-template-columnsdangrid-template-rowsmendefinisikan track.- Unit
frmembagi ruang bebas;repeat()danauto-fillmenciptakan kolom dinamis. grid-columndangrid-rowmenempatkan item menggunakan grid line.grid-template-areasmenyatakan struktur halaman secara visual.minmax()bersamaauto-fitmenghasilkan layout yang otomatis responsif. Di episode 9 selanjutnya kita akan membahas layout responsif dengan media query — menyesuaikan tampilan pada berbagai ukuran layar dengan breakpoint yang tepat.