Halo teman-teman semuanya, setelah sebelumnya kita belajar tentang Flexbox untuk mengatur elemen secara satu dimensi (baris atau kolom), sekarang kita akan membahas teknik layout dua dimensi yang jauh lebih fleksibel: CSS Grid.
Dengan Grid Layout, kita bisa menyusun elemen dalam bentuk baris dan kolom sekaligus — cocok untuk membuat galeri gambar, dashboard, atau tata letak kompleks lainnya.
Apa Itu CSS Grid?
CSS Grid adalah sistem layout dua dimensi yang memungkinkan kita mengatur elemen dalam baris dan kolom. Kita hanya perlu mengaktifkannya pada container dengan:
display: grid;
1. Display: grid
Untuk mengaktifkan CSS Grid pada elemen induk (container):
.container {
display: grid;
}
2. Grid-template-columns dan grid-template-rows
Menentukan jumlah dan ukuran kolom/baris:
.container {
grid-template-columns: 200px 200px;
grid-template-rows: 100px 100px;
}
Contoh penggunaan fr (fractional unit):
grid-template-columns: 1fr 2fr; /* 1 bagian dan 2 bagian */
3. Gap
Memberi jarak antar baris dan kolom:
.container {
gap: 16px;
}
4. Grid Area (Optional)
Kita juga bisa menempatkan item secara spesifik di kolom dan baris tertentu:
.item {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
Contoh Lengkap
Contoh berikut menunjukkan bagaimana membuat tata letak 3 kolom dan 2 baris dengan jarak antar elemen.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>CSS Grid Dasar</title>
<style>
body {
font-family: sans-serif;
background-color: #f1f1f1;
padding: 20px;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 20px;
}
.item {
background-color: #2ecc71;
color: white;
font-weight: bold;
padding: 20px;
text-align: center;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
Elemen .container menggunakan display: grid dengan tiga kolom dan dua baris. Properti gap memberikan jarak antar elemen. Setiap .item tampil dalam kotak hijau dengan teks rata tengah.
Kesimpulan
CSS Grid memungkinkan kita membuat tata letak dua dimensi yang rapi dan fleksibel. Dengan hanya beberapa baris CSS, kita bisa menyusun elemen ke dalam baris dan kolom, mengatur ukuran, posisi, dan jaraknya dengan sangat mudah.
Di materi selanjutnya, kita akan belajar tentang Media Query, yaitu teknik untuk membuat halaman web kita responsif dan tampil dengan baik di berbagai ukuran layar.
Terima Kasih