Panduan CSS Grid Layout untuk Pemula: Bangun Layout Website Seperti Profesional

📌 Pendahuluan

Ketika kamu mulai belajar membangun tampilan website, mungkin kamu mengenal Flexbox terlebih dahulu untuk membuat layout. Namun, saat layout menjadi lebih kompleks—misalnya, kamu ingin membuat galeri gambar, dashboard admin, atau template majalah—di situlah CSS Grid menjadi andalan.

Artikel ini akan membimbingmu memahami dasar-dasar Grid Layout, properti penting, dan bagaimana kamu bisa menggunakannya untuk membuat tampilan web yang rapi dan responsif.

---

🧩 1. Apa Itu CSS Grid?

CSS Grid adalah sistem layout dua dimensi yang memungkinkan kamu menyusun konten berdasarkan baris (rows) dan kolom (columns). Ini menjadikannya lebih fleksibel dibandingkan Flexbox yang hanya satu dimensi.

Kelebihan Grid:

• Cocok untuk layout besar dan kompleks.

• Mendukung pengaturan garis (line-based positioning).

• Memudahkan pembuatan responsif design.

---

📐 2. Struktur Dasar Grid Layout

Mari kita lihat contoh dasar membuat Grid:

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.box {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

📌 Penjelasan:

• display: grid; → Mengubah elemen menjadi grid container.

• grid-template-columns → Menentukan jumlah dan lebar kolom.

• 1fr → Fraction unit, membagi ruang secara proporsional.

---

🎛 3. Properti Penting dalam Grid

Contoh penggunaan grid-template-areas:

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

---

📱 4. Grid Layout Responsif

Kamu bisa membuat layout yang menyesuaikan layar dengan media query atau menggunakan unit fr, minmax(), dan auto-fit.

Contoh:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Ini memungkinkan jumlah kolom menyesuaikan ukuran layar tanpa perlu media query.

---

💡 5. Studi Kasus Sederhana: Galeri Foto

<div class="gallery">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}
.gallery img {
  width: 100%;
  height: auto;
}

📌 Layout ini akan otomatis menyesuaikan jumlah kolom tergantung ukuran layar.

---

🎯 Kesimpulan

CSS Grid memberikan cara yang elegan dan efisien untuk membangun layout website modern. Meskipun pada awalnya terlihat kompleks, dengan latihan kamu akan bisa membuat desain website yang rapi, responsif, dan mudah dikelola.