Setelah kita mempelajari Flexbox untuk layout satu dimensi (baris atau kolom), sekarang saatnya mengenal CSS Grid - sistem layout dua dimensi yang lebih powerful. Grid memungkinkan kita mengatur baris dan kolom secara bersamaan, sangat cocok untuk membuat layout halaman secara keseluruhan, dashboard, galeri foto, dan berbagai struktur kompleks lainnya.
Apa Itu CSS Grid?
CSS Grid Layout adalah sistem layout dua dimensi yang membagi halaman menjadi baris dan kolom, lalu menempatkan elemen ke dalam sel-sel grid. Berbeda dengan Flexbox yang hanya satu arah, Grid bisa mengatur horizontal dan vertikal sekaligus.
- Flexbox: 1 dimensi (baik untuk navbar, card row, form).
- Grid: 2 dimensi (baik untuk layout halaman, dashboard, galeri).
Keduanya saling melengkapi, bukan menggantikan.
1. display: grid (Mengaktifkan Grid)
Untuk memulai Grid, cukup tambahkan display: grid ke container. Secara default, item akan disusun dalam satu kolom (seperti block biasa).
Contoh:
<style>
.grid-container {
display: grid;
background: #f0f4f8;
padding: 10px;
gap: 10px;
}
.grid-item {
background: #3b82f6;
color: white;
padding: 20px;
text-align: center;
}
</style>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
Tanpa grid-template-columns, item akan vertikal (satu kolom).
2. grid-template-columns (Mengatur Kolom)
grid-template-columns menentukan jumlah dan lebar kolom dalam grid. Nilai bisa dalam px, %, fr, auto, dll.
Contoh 3 kolom dengan lebar tetap:
<style>
.grid-3kolom {
display: grid;
grid-template-columns: 100px 200px 100px;
gap: 10px;
}
</style>
grid-template-columns: 80px 120px 80px
3. Unit fr (Fractional Unit)
Unit fr adalah unit khusus Grid yang membagi ruang yang tersedia secara proporsional. Ini sangat berguna untuk layout responsif.
Contoh: 3 kolom dengan perbandingan 1:2:1
.grid-fr {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}
grid-template-columns: 1fr 2fr 1fr (kolom tengah 2x lebih lebar)
4. grid-template-rows (Mengatur Baris)
grid-template-rows menentukan tinggi setiap baris. Bisa dikombinasikan dengan grid-template-columns.
Contoh:
.grid-rows {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 150px;
gap: 10px;
}
grid-template-rows: 60px 80px
Contoh Proyek: Layout Halaman dengan Grid
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid - Layout Halaman</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f0f4f8;
padding: 20px;
}
.grid-layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
min-height: 100vh;
}
.header {
grid-column: 1 / -1;
background: #3b82f6;
color: white;
padding: 20px;
border-radius: 12px;
}
.sidebar {
background: #f8fafc;
padding: 20px;
border-radius: 12px;
}
.main {
background: white;
padding: 20px;
border-radius: 12px;
}
.footer {
grid-column: 1 / -1;
background: #1e293b;
color: #94a3b8;
padding: 20px;
text-align: center;
border-radius: 12px;
}
@media (max-width: 768px) {
.grid-layout {
grid-template-columns: 1fr;
}
}
.info-box {
background: #eef2ff;
padding: 20px;
border-radius: 12px;
margin-top: 30px;
}
code {
background: #e2e8f0;
padding: 2px 6px;
border-radius: 4px;
font-family: monospace;
}
</style>
</head>
<body>
<div class="grid-layout">
<header class="header">
<h1>Website dengan CSS Grid</h1>
</header>
<aside class="sidebar">
<h3>Sidebar</h3>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</aside>
<main class="main">
<h2>Konten Utama</h2>
<p>Ini adalah area konten utama. Dengan CSS Grid, kita bisa membuat layout header, sidebar, main, dan footer dengan mudah.</p>
</main>
<footer class="footer">
<p>© 2024 - Belajar CSS Grid</p>
</footer>
</div>
<div class="info-box">
<h3>Ringkasan CSS Grid Dasar</h3>
<ul>
<li><code>display: grid</code> → mengaktifkan grid.</li>
<li><code>grid-template-columns</code> → menentukan jumlah dan lebar kolom.</li>
<li><code>grid-template-rows</code> → menentukan tinggi baris.</li>
<li>Unit <code>fr</code> → membagi ruang yang tersedia secara proporsional.</li>
<li><code>gap</code> → jarak antar baris dan kolom.</li>
<li>Grid sangat cocok untuk layout halaman 2 dimensi.</li>
</ul>
</div>
</body>
</html>
Hasil visual layout grid:
Kesalahan Umum Pemula
- Lupa menambahkan
display: gridsehingga properti grid tidak bekerja. - Menggunakan
frtanpa memahami cara kerjanya (fr membagi ruang yang tersedia setelah konten). - Tidak menggunakan
gapsehingga item menempel satu sama lain. - Mengira grid hanya untuk layout kompleks — grid juga bagus untuk komponen sederhana.
Latihan Singkat
- Buat grid dengan 3 kolom sama lebar menggunakan
1fr 1fr 1fr. - Buat grid dengan 2 kolom (200px dan 1fr), isi dengan 4 item.
- Buat grid dengan 3 baris (100px, 150px, 100px) dan 2 kolom (1fr 2fr).
- Buat layout halaman sederhana: header, sidebar, konten, footer menggunakan grid.
Intisari Hari Ini
- CSS Grid sistem layout 2 dimensi (baris dan kolom).
display: grid→ mengaktifkan grid.grid-template-columns→ lebar kolom.grid-template-rows→ tinggi baris.- Unit
fr→ membagi ruang proporsional. gap→ jarak antar sel.grid-column: 1 / -1→ membuat elemen memanjang dari kolom 1 hingga akhir.
grid-template-columns: 260px 1fr dan grid-template-rows: auto 1fr auto. Di dalam main content, buat grid card 3 kolom menggunakan grid-template-columns: repeat(3, 1fr). Pastikan semua responsif dengan media query.
Artikel Sebelumnya: CSS Dasar #28 - Membuat Layout dengan Flexbox
Artikel Selanjutnya: CSS Dasar #30 - Unit fr, repeat(), minmax(), dan auto-fill vs auto-fit