CSS Grid: Sistem Layout Dua Dimensi yang Powerful

Apa Itu CSS Grid?

CSS Grid adalah sistem layout dua dimensi yang memungkinkan kita menyusun elemen-elemen HTML dalam baris (rows) dan kolom (columns) secara bersamaan. Dengan CSS Grid, kita bisa membuat layout kompleks seperti dashboard, tata letak majalah, atau antarmuka aplikasi web dengan sangat mudah.

Berbeda dengan Flexbox yang lebih cocok untuk layout satu dimensi (baris atau kolom), CSS Grid memberikan kontrol penuh atas posisi dan ukuran item dalam grid — baik secara horizontal maupun vertikal.

---

Cara Kerja CSS Grid

CSS Grid bekerja dengan dua komponen utama:

1. Grid Container – Elemen induk yang membungkus semua item.
2. Grid Items – Elemen-lemen anak di dalam grid container.

Untuk mengaktifkan CSS Grid, cukup tambahkan properti berikut ke container:

.container {
    display: grid;
}

Setelah itu, Anda bisa mulai menentukan jumlah baris, kolom, jarak, perataan, dan lainnya.

---

Membuat Kolom dan Baris (grid-template-columns, grid-template-rows)

Gunakan properti berikut untuk menentukan jumlah dan ukuran baris/kolom:

.container {
    display: grid;
    grid-template-columns: 100px 150px auto; /* 3 kolom */
    grid-template-rows: 50px 100px;          /* 2 baris */
}

Anda juga bisa menggunakan nilai spesial seperti:

• auto – ukuran otomatis sesuai konten
• fr – unit fraksi (bagian relatif dari ruang tersisa)
• repeat() – mengulangi pola kolom/baris

Contoh:

grid-template-columns: repeat(3, 1fr); /* 3 kolom dengan lebar sama */

---

Jarak Antara Item (gap)

Properti gap digunakan untuk memberi jarak antar baris dan kolom.

.container {
    gap: 10px 20px; /* 10px antar baris, 20px antar kolom */
}

Atau gunakan:

row-gap: 10px;
column-gap: 20px;

---

Perataan Kontainer (justify-content, align-content)

Jika konten grid lebih kecil dari container, Anda bisa mengatur perataannya:

Properti	Fungsi
justify-content	Meratakan grid sepanjang sumbu kolom
align-content	Meratakan grid sepanjang sumbu baris

Contoh:

justify-content: center;
align-content: start;

Nilai umum:

• start
• end
• center
• space-between
• space-around
• space-evenly

---

Perataan Item (justify-items, align-items)

Mengatur perataan setiap item dalam grid:

Properti	Fungsi
justify-items	Meratakan item sepanjang sumbu kolom
align-items	Meratakan item sepanjang sumbu baris

Contoh:

justify-items: stretch; /* Default */
align-items: center;

---

Menempatkan Item Secara Spesifik (grid-column, grid-row)

Anda bisa menempatkan item pada posisi tertentu menggunakan:

.item1 {
    grid-column: 1 / 3; /* dari kolom 1 sampai kolom 3 */
    grid-row: 1 / 2;    /* dari baris 1 sampai baris 2 */
}

Anda juga bisa menggunakan span untuk menentukan jumlah kolom/baris yang ditempati:

.item2 {
    grid-column: 2 / span 2; /* mulai dari kolom 2 dan ambil 2 kolom */
}

---

Nama Area dengan grid-template-areas

Anda bisa memberi nama area dalam grid untuk mempermudah pengaturan layout.

Contoh:

.container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 60px 1fr 60px;
    grid-template-areas:
        "sidebar header"
        "sidebar main"
        "sidebar footer";
}

.header {
    grid-area: header;
}
.sidebar {
    grid-area: sidebar;
}
.main {
    grid-area: main;
}
.footer {
    grid-area: footer;
}

---

Contoh Praktis

HTML

<div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

CSS

.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 60px 1fr 60px;
    grid-template-areas:
        "sidebar header"
        "sidebar content"
        "sidebar footer";
    gap: 10px;
    height: 100vh;
}

.header { grid-area: header; background: #f0f0f0; }
.sidebar { grid-area: sidebar; background: #ddd; }
.content { grid-area: content; background: #fff; }
.footer { grid-area: footer; background: #eee; }

Dengan kode ini, kita berhasil membuat layout sederhana dengan sidebar, header, content, dan footer.

---

Visualisasi Grid di Browser

Gunakan Developer Tools (F12) untuk melihat bagaimana grid bekerja pada elemen. Di banyak browser modern, Anda bisa mengaktifkan overlay grid untuk melihat garis-garis pembatas baris dan kolom.

---

Kesimpulan

CSS Grid adalah alat yang sangat powerful untuk membuat layout dua dimensi dengan presisi tinggi. Dengan kemampuan menempatkan item secara eksplisit, mengatur jarak, perataan, dan membuat area bernama, CSS Grid mempermudah pembuatan desain yang kompleks dan responsif.

Selanjutnya, kita akan membahas Desain Responsif dengan CSS, yaitu teknik membuat website yang bisa menyesuaikan diri dengan berbagai ukuran layar.

---

💡 Tips Praktis

• Gunakan grid-template-columns dan grid-template-rows untuk membuat struktur dasar layout.
• Latih penggunaan grid-column, grid-row, dan grid-area untuk penempatan item yang akurat.
• Manfaatkan grid-template-areas untuk layout yang mudah dibaca dan diatur.
• Uji hasil layout Anda menggunakan browser developer tools.