CSS Grid: Tools untuk Desain Web 2 Dimensi

“Kalau Flexbox untuk garis satu dimensi, maka Grid adalah solusi untuk layout dua dimensi yang kompleks.”

📐 1. Apa Itu CSS Grid?

CSS Grid adalah sistem layout berbasis baris dan kolom. Sangat cocok digunakan saat kamu ingin membuat tampilan web yang terdiri dari berbagai area — seperti header, sidebar, konten, dan footer — dengan kontrol posisi yang presisi.

🔧 2. Struktur Dasar CSS Grid

Kamu hanya perlu satu baris kode untuk memulai Grid!

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

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 kolom sama rata */
  gap: 10px;
}
.box {
  background-color: lightcoral;
  padding: 20px;
  color: white;
}

📏 3. Properti Penting CSS Grid

Di Container:

Di Item:

🗂️ 4. Contoh Kasus: Layout Majalah 3x2

<div class="grid-magazine">
  <div class="header">Header</div>
  <div class="menu">Menu</div>
  <div class="main">Main Content</div>
  <div class="aside">Aside</div>
  <div class="footer">Footer</div>
</div>

.grid-magazine {
  display: grid;
  grid-template-areas:
    "header header"
    "menu main"
    "footer footer";
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

.header  { grid-area: header; background: #f76c6c; }
.menu    { grid-area: menu; background: #f8b195; }
.main    { grid-area: main; background: #355c7d; }
.aside   { grid-area: aside; background: #6c5b7b; }
.footer  { grid-area: footer; background: #c06c84; }

.grid-magazine > div {
  color: white;
  padding: 20px;
}

📱 5. Responsif? Mudah Banget!

Kamu bisa ubah grid-template-columns dengan media queries untuk tampilan mobile:

@media (max-width: 600px) {
  .grid-magazine {
    grid-template-areas:
      "header"
      "menu"
      "main"
      "footer";
    grid-template-columns: 1fr;
  }
}

✅ 6. Kesimpulan

• CSS Grid cocok untuk layout kompleks, dua dimensi.

• Kombinasikan dengan Flexbox untuk hasil maksimal.

• Sangat direkomendasikan dipelajari setelah memahami dasar CSS & Flexbox.