Bagaimana Anda membuat tata letak dengan CSS Grid?

Question

Accepted Answer

**CSS Grid** adalah sistem tata letak dua dimensi — mengendalikan **baris dan kolom secara bersamaan**, tidak seperti baris tunggal Flexbox. Anda menentukan grid pada kontainer dan menempatkan item ke dalamnya.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## Unit fr dan repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr` ("fraction") mendistribusikan ruang yang tersedia — `1fr 2fr` membaginya 1:2. `repeat(3, 1fr)` adalah singkatan untuk tiga trek yang sama.

## Grid responsif TANPA media queries

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

Baris tunggal ini membuat grid kartu yang sepenuhnya responsif: setiap kolom minimal `250px`; browser memuat **sebanyak mungkin** per baris dan membungkus sisanya — secara otomatis beralih dari 4 kolom di desktop ke 1 di seluler. `auto-fit` + `minmax` adalah salah satu pola Grid yang paling dicintai.

## Menempatkan item di seluruh beberapa sel

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

Item dapat menjangkau beberapa baris/kolom, memungkinkan tata letak gaya majalah yang canggung dengan Flexbox.

## Grid vs Flexbox

- **Grid** — Tata letak 2D (baris *dan* kolom): tata letak halaman, grid kartu, dasbor.
- **Flexbox** — Tata letak 1D (baris atau kolom tunggal): bilah navigasi, grup tombol, pemusatan.

Mereka berfungsi dengan baik bersama — sel grid itu sendiri dapat menjadi kontainer flex.

## Mengapa ini penting

Grid adalah alat tata letak CSS paling kuat — menangani tata letak halaman penuh dan grid kartu responsif dengan jelas, sering menggantikan trik div bersarang.

Pola responsif `auto-fit`/`minmax` saja menghilangkan kebutuhan untuk banyak media queries.