CSS Grid: Layout Dua Dimensi

CSS Grid adalah layout system yang bikin kita bisa bikin layout dua dimensi — ngatur baris DAN kolom sekaligus. Kalau Flexbox itu kayak jalur kereta (satu arah), Grid itu kayak papan catur (dua arah). Artikel ini bakal bedah CSS Grid dari dasar sampai yang advanced.

1. Grid Container — Awal dari Semua

Untuk make CSS Grid, kamu harus jadikan parent element sebagai grid container dengan display: grid (atau display: inline-grid).

.container {
  display: grid;
}

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

Begitu kamu kasih display: grid, semua child-nya otomatis jadi grid items. Tapi tanpa konfigurasi tambahan, mereka cuma numpuk di satu kolom. Yang bikin Grid powerful adalah property yang ngatur kolom dan barisnya.

2. Kolom dan Baris — Grid Template

Grid Template Columns

grid-template-columns nentuin berapa kolom dan lebar masing-masing.

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 1rem;
}

Ini bikin 3 kolom: kiri 200px, tengah fleksibel (ambil sisa ruang), kanan 200px.

Unit Fr — Fraction

fr adalah unit spesial CSS Grid yang artinya fraction of available space. Kalau ada 3 kolom 1fr 1fr 1fr, mereka bakal lebar sama rata. Kalau 2fr 1fr 1fr, kolom pertama lebar dua kali lipat dari yang lain.

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr; /* Kolom pertama 2x lebih lebar */
  gap: 1rem;
}

Auto-fit dan Auto-fill

Ini dua keyword yang sering bikin bingung tapi sebenernya powerful banget.

/* Auto-fit: kolom meregang mengisi ruang yang tersisa */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

/* Auto-fill: kolom tetap ada meskipun ruang kosong di akhir */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

Perbedaannya: auto-fit bakal meregang kolom terakhir kalau cuma ada satu kolom yang tersisa, sedangkan auto-fill bakal bikin kolom kosong tapi gak stretch.

3. Grid Template Rows

Sama kayak columns, tapi buat baris.

.container {
  display: grid;
  grid-template-rows: 100px auto 100px;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

Baris pertama dan ketiga tetap 100px, baris kedua mengikuti konten (auto).

Repeat Function

Daripada nulis berulang, pakai repeat():

.container {
  grid-template-columns: repeat(4, 1fr); /* 4 kolom sama lebar */
  grid-template-rows: repeat(3, 150px);  /* 3 baris tinggi 150px */
}

4. Grid Lines, Tracks, dan Areas

CSS Grid punya konsep garis yang penting banget.

Grid Lines

Setiap kolom dan baris punya garis (line). Kolom pertama punya garis 1 di kiri dan garis 2 di kanan.

.item {
  grid-column: 1 / 3; /* Mulai garis 1, akhir garis 3 (span 2 kolom) */
  grid-row: 1 / 2;    /* Mulai garis 1, akhir garis 2 (span 1 baris) */
}

Grid Spanning

span adalah cara yang lebih intuitif:

.item {
  grid-column: span 3; /* Ambil 3 kolom */
  grid-row: span 2;    /* Ambil 2 baris */
}

Grid Areas — Cara Visual

grid-template-areas bikin kamu bisa gambar layout dengan teks. Gila banget, tapi beneran bisa.

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  gap: 1rem;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

Setiap nama di quotes itu jadi grid area, dan kamu assign ke child pakai grid-area: nama. Gampang dibaca, gampang diubah.

5. Grid Items Properties

Selain container, ada juga property yang dipakai di item:

Justify Self

Ngatur alignment item di horizontal (main axis) untuk item tertentu.

.item {
  justify-self: center; /* Item di tengah secara horizontal */
  justify-self: stretch; /* Item meregang (default) */
  justify-self: start;  /* Mulai dari kiri */
  justify-self: end;    /* Mulai dari kanan */
}

Align Self

Ngatur alignment item di vertical (cross axis).

.item {
  align-self: center; /* Item di tengah secara vertikal */
  align-self: start;  /* Mulai dari atas */
  align-self: end;    /* Mulai dari bawah */
}

Place Self — Shorthand

Gabungan align-self + justify-self:

.item {
  place-self: center; /* Tengah horizontal + vertikal */
  place-self: start end; /* Kiri atas */
}

6. Alignment di Grid Container

Sama kayak Flexbox, Grid juga punya alignment di level container.

Justify Content (Horizontal)

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  justify-content: center;        /* Grid di tengah */
  justify-content: space-between; /* Grid menyebar */
  justify-content: space-around;  /* Spacing merata */
}

Align Content (Vertical)

.container {
  display: grid;
  grid-template-rows: 200px 200px;
  align-content: center; /* Grid di tengah secara vertikal */
  align-content: space-between;
}

Place Content — Shorthand

.container {
  place-content: center; /* Tengah horizontal + vertikal */
  place-content: start space-between;
}

7. Gap — Spacing Antara Item

gap di CSS Grid sama persis dengan di Flexbox — tapi lebih powerful karena bisa beda untuk baris dan kolom.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem; /* Gap sama untuk baris dan kolom */
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 2rem;    /* Gap baris 2rem */
  column-gap: 1rem; /* Gap kolom 1rem */
}

8. Contoh Praktis: Responsive Card Layout

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

.card {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

<div class="card-grid">
  <div class="card">
    <img src="photo1.jpg" alt="Foto 1">
    <h3>Judul Artikel 1</h3>
    <p>Deskripsi singkat tentang artikel ini.</p>
  </div>
  <div class="card">
    <img src="photo2.jpg" alt="Foto 2">
    <h3>Judul Artikel 2</h3>
    <p>Deskripsi singkat tentang artikel ini.</p>
  </div>
  <div class="card">
    <img src="photo3.jpg" alt="Foto 3">
    <h3>Judul Artikel 3</h3>
    <p>Deskripsi singkat tentang artikel ini.</p>
  </div>
  <div class="card">
    <img src="photo4.jpg" alt="Foto 4">
    <h3>Judul Artikel 4</h3>
    <p>Deskripsi singkat tentang artikel ini.</p>
  </div>
</div>

Kartu-kartu otomatis responsive: di desktop 3 kolom, tablet 2 kolom, mobile 1 kolom. Cuma 5 baris CSS!

9. Contoh Praktis: Dashboard Layout

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: 60px 1fr 1fr;
  grid-template-areas:
    "nav    nav     nav"
    "sidebar chart  table"
    "sidebar metric metric";
  gap: 1rem;
  min-height: 100vh;
  padding: 1rem;
}

.nav     { grid-area: nav; }
.sidebar { grid-area: sidebar; }
.chart   { grid-area: chart; }
.table   { grid-area: table; }
.metric  { grid-area: metric; }

<div class="dashboard">
  <nav class="nav">Navigation</nav>
  <aside class="sidebar">Sidebar</aside>
  <div class="chart">Chart</div>
  <div class="table">Data Table</div>
  <div class="metric">Metrics</div>
</div>

Dashboard profesional dalam hitungan menit. Grid Template Areas emang the real deal.

10. Flexbox vs Grid — Kapan Pakai Mana?

Ini pertanyaan yang paling sering muncul. Jawaban singkatnya:

Kapan	Pakai
Layout satu arah (baris ATAU kolom)	Flexbox
Layout dua arahi (baris DAN kolom)	Grid
Alignment & distribusi spacing	Flexbox
Bikin layout kompleks secara visual	Grid
Responsive card grid	Grid (auto-fill/auto-fit)
Navbar, toolbar, inline layout	Flexbox
Dashboard, magazine layout	Grid

Kenapa Gak selalu Grid?

Flexbox lebih intuitif untuk hal-hal sederhana. Kalau cuma mau baris card yang rapi atau navbar, Flexbox lebih cepat dipahami. Grid lebih kuat untuk layout yang kompleks dan butuh kontrol dua dimensi.

Pro tip: Banyak layout modern pakai keduanya sekaligus — Grid buat layout utama, Flexbox buat alignment di dalam item.

11. Tips & Tricks

Minmax untuk Responsive Tanpa Media Query

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

Otomatis responsive tanpa perlu @media!

Named Grid Lines

.container {
  grid-template-columns: [start] 1fr [content-start] 2fr [content-end] 1fr [end];
}

.item {
  grid-column: content-start / content-end;
}

Implicit Grid — Auto Rows

Kalau kamu gak tentuin jumlah baris, Grid bikin implicit rows secara otomatis:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px; /* Baris otomatis tinggi 200px */
}

Nama Baris dengan Minmax

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

12. Recap

Konsep	Fungsi	Nilai Utama
`display: grid`	Aktifkan Grid	—
`grid-template-columns`	Definisikan kolom	`1fr`, `200px`, `auto`
`grid-template-rows`	Definisikan baris	`1fr`, `100px`, `auto`
`grid-template-areas`	Layout visual	`"header header"`
`grid-column`	Posisi item horizontal	`1 / 3`, `span 2`
`grid-row`	Posisi item vertikal	`1 / 3`, `span 2`
`grid-area`	Assign item ke area	`header`, `sidebar`
`gap`	Jarak antar item	`1rem`, `16px`
`justify-content`	Alignment horizontal	`center`, `space-between`
`align-content`	Alignment vertical	`center`, `stretch`
`auto-fill` / `auto-fit`	Responsive otomatis	`minmax(250px, 1fr)`

Penutup

CSS Grid emang powerful banget dan bisa bikin layout yang dulu susah banget jadi gampang. Dengan Grid Template Areas, kamu bahkan bisa “gambar” layout langsung di CSS — tanpa perlu banyak hack atau wrapper element.

Di artikel selanjutnya, kita bakal bahas Responsive Design — gimana bikin website yang perfect di semua ukuran layar. Kita bakal pakai Grid, Flexbox, dan media query bareng-bareng.