CSS Grid adalah sistem layout dua dimensi pada CSS yang memungkinkan kita menyusun elemen dalam bentuk baris (rows) dan kolom (columns) secara bersamaan. CSS Grid sangat cocok untuk membuat layout kompleks, dashboard, galeri, atau halaman penuh.

Perbedaan dengan Flexbox:
Flexbox → satu dimensi (horizontal atau vertikal)
CSS Grid → dua dimensi (horizontal dan vertikal)

Terminologi Penting dalam CSS Grid

Istilah	Penjelasan Singkat
Grid Container	Elemen induk yang memiliki display: grid;
Grid Item	Elemen langsung di dalam Grid Container
Grid Line	Garis pemisah antar kolom/baris
Grid Track	Jalur/ruang antar dua garis grid
Grid Cell	Ruang antara dua baris dan dua kolom
Grid Area	Satu atau lebih cell yang membentuk area

Cara Menggunakan CSS Grid

1. Membuat Grid Container

.container {

  display: grid;

}

2. Menentukan Baris dan Kolom

.container {

  display: grid;

  grid-template-columns: 200px 1fr 200px;

  grid-template-rows: auto 1fr auto;

}

• grid-template-columns: Membuat 3 kolom (2 kolom tetap, 1 fleksibel)
  
• grid-template-rows: Baris atas dan bawah otomatis, tengah fleksibel
  

Satuan yang Sering Digunakan

Satuan	Keterangan
px	Nilai tetap (misalnya: 200px)
%	Persentase dari elemen induk
fr	Fraction unit → pembagian ruang
auto	Ukuran berdasarkan konten
minmax()	Rentang minimum dan maksimum
repeat()	Pengulangan kolom/baris

Contoh:

grid-template-columns: repeat(3, 1fr);

Properti Grid Penting

Properti	Fungsi
grid-template-columns	Mengatur jumlah dan ukuran kolom
grid-template-rows	Mengatur jumlah dan ukuran baris
grid-gap atau gap	Mengatur jarak antar grid-item
grid-column	Mengatur posisi/area kolom untuk item tertentu
grid-row	Mengatur posisi/area baris untuk item tertentu
grid-area	Nama area untuk mempermudah peletakan elemen

Contoh Implementasi

1. Layout Sederhana Tiga Kolom

<div class="container">

  <div class="item">Header</div>

  <div class="item">Sidebar</div>

  <div class="item">Konten</div>

  <div class="item">Footer</div>

</div>

.container {

  display: grid;

  grid-template-columns: 200px 1fr 200px;

  grid-template-rows: auto 1fr auto;

  gap: 10px;

}

.item {

  background: #ddd;

  padding: 20px;

  text-align: center;

}

2. Menggunakan Named Grid Areas

<div class="grid">

  <header>Header</header>

  <aside>Sidebar</aside>

  <main>Konten</main>

  <footer>Footer</footer>

</div>

.grid {

  display: grid;

  grid-template-areas:

    "header header"

    "sidebar main"

    "footer footer";

  grid-template-columns: 200px 1fr;

  grid-template-rows: auto 1fr auto;

  gap: 10px;

}

header { grid-area: header; background: #3498db; }

aside  { grid-area: sidebar; background: #2ecc71; }

main   { grid-area: main; background: #ecf0f1; }

footer { grid-area: footer; background: #95a5a6; }

3. Galeri Responsif dengan repeat() dan minmax()

<div class="gallery">

  <div class="item">1</div>

  <div class="item">2</div>

  <div class="item">3</div>

  <div class="item">4</div>

</div>

.gallery {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

  gap: 10px;

}

.item {

  background: #bdc3c7;

  height: 100px;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 1.5rem;

}

Hasil: Grid responsif — jumlah kolom menyesuaikan lebar layar.

Responsive Grid dengan Media Query

@media (max-width: 768px) {

  .grid {

    grid-template-columns: 1fr;

    grid-template-areas:

      "header"

      "main"

      "sidebar"

      "footer";

  }

}

Membuat layout berubah dari 2 kolom menjadi 1 kolom di layar kecil.

Best Practice

• Gunakan fr untuk pembagian ruang fleksibel
  
• Gunakan grid-template-areas untuk layout kompleks → lebih mudah dibaca
  
• Gunakan minmax() untuk layout yang tetap proporsional di berbagai ukuran layar
  
• Kombinasikan dengan Flexbox untuk pengaturan isi di dalam grid-item
  

Kesimpulan

CSS Grid memberikan fleksibilitas tinggi dalam membuat tata letak web modern.
Dengan pemahaman terhadap grid-template, gap, dan grid-area, pengembang dapat menyusun halaman yang rapi, responsif, dan mudah diatur.