CSS Layout Grid

Pendahuluan

Kalau Flexbox ibarat barisan antrean yang lurus, CSS Grid adalah level selanjutnya. Anggap saja CSS Grid ini seperti blueprint arsitektur atau papan catur. Bedanya dengan Flexbox yang fokus di satu arah (horizontal atau vertikal saja), Grid bisa mengatur dua arah sekaligus: baris (rows) dan kolom (columns).

1. Konsep Utama: Container dan Items

Dalam CSS Grid, ada dua pemain utama yang harus kamu kenal agar tidak tertukar:

Grid Container: Elemen induk (parent) yang kita beri perintah display: grid. Ini adalah area "lapangan" tempat semua elemen berada.
Grid Items: Elemen anak (children) yang berada langsung di dalam container. Elemen-elemen inilah yang akan kita atur posisinya di dalam kotak-kotak grid.

2. Anatomy of Grid: Garis dan Jalur

Untuk memahami Grid, kamu perlu membayangkan ada garis-garis imajiner di dalam container kamu:

Grid Lines: Garis pembatas antar kolom atau baris. Garis ini dimulai dari angka 1.
Grid Track: Ruang di antara dua garis grid (bisa berupa satu kolom penuh atau satu baris penuh).
Grid Cell: Satu kotak tunggal di dalam grid. Ibarat satu sel di Excel.
Grid Area: Kumpulan dari beberapa Grid Cell yang membentuk persegi panjang.

3. Satuan `fr` Unit

Lupakan penggunaan persen (%) yang sering bikin hitungan jadi desimal rumit. Grid memperkenalkan satuan baru bernama Fractional Unit atau $fr$ .

Satuan $fr$ berfungsi untuk membagi ruang kosong yang tersedia secara proporsional. Misalnya, jika kamu punya kode grid-template-columns: 1fr 2fr 1fr;, maka kolom tengah akan otomatis berukuran dua kali lebih besar daripada kolom kiri dan kanan, tidak peduli seberapa lebar layarnya.

4. Property Wajib Tahu

Berikut adalah beberapa properti yang akan paling sering kamu gunakan:

grid-template-columns: Menentukan jumlah dan lebar kolom.
grid-template-rows: Menentukan jumlah dan tinggi baris.
gap: Memberikan jarak antar kotak (gutter) tanpa perlu menggunakan margin manual pada tiap item.
grid-column & grid-row: Digunakan pada Grid Items untuk menentukan dari garis mana ke garis mana sebuah item harus membentang.

5. Contoh Koding Lengkap

Mari kita buat sebuah layout dasar yang terdiri dari Header, Sidebar, Main Content, dan Footer menggunakan CSS Grid modern.

index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mastering CSS Grid</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="parent-grid">
        <header class="item-header">Header (Full Width)</header>
        <aside class="item-sidebar">Sidebar</aside>
        <main class="item-main">Main Content</main>
        <footer class="item-footer">Footer (Full Width)</footer>
    </div>
</body>
</html>

style.css

/* Reset Dasar */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
}

/* Mengatur Container Utama */
.parent-grid {
    display: grid;
    /* Kita buat 3 kolom: kolom kiri 200px, sisanya fleksibel */
    grid-template-columns: 200px 1fr 1fr;
    /* Kita buat baris otomatis sesuai konten */
    grid-template-rows: auto;
    gap: 15px;
}

/* Styling Umum untuk semua Item */
.parent-grid > * {
    background-color: #e0e0e0;
    padding: 20px;
    border: 2px solid #333;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
}

/* Mengatur Posisi Spesifik Item */

.item-header {
    /* Header membentang dari garis kolom 1 sampai 4 (full width) */
    grid-column: 1 / 4;
    background-color: #333;
    color: white;
}

.item-sidebar {
    /* Sidebar berada di kolom pertama saja */
    grid-column: 1 / 2;
    /* Sidebar membentang dari baris 2 sampai 3 */
    grid-row: 2 / 3;
}

.item-main {
    /* Main Content membentang di sisa 2 kolom */
    grid-column: 2 / 4;
}

.item-footer {
    /* Footer juga membentang full width */
    grid-column: 1 / 4;
    background-color: #777;
    color: white;
}

Penutup: Konsistensi adalah Kunci

CSS Grid mungkin terasa intimidasi di awal karena banyak istilah garis dan angka. Namun, begitu kamu paham cara kerja grid-template-columns dan sistem koordinatnya, kamu tidak akan mau lagi kembali ke cara lama. Layout yang dulu butuh waktu berjam-jam, sekarang bisa selesai dalam hitungan menit.

Kunci utamanya: Jangan cuma dibaca, langsung buka editor kamu dan coba ubah angka-angka di grid-column atau fr untuk melihat perubahannya secara real-time.

Apakah kamu ingin saya membuatkan tutorial cara menggunakan fitur grid-template-areas agar penulisan layout jadi jauh lebih rapi lagi?