Piye cara nggawe layout karo CSS Grid?

Question

Accepted Answer

**CSS Grid** minangka sistem layout rong dimensi — ngatur **baris lan kolom ing wektu sing padha**, beda karo Flexbox sing mung siji baris. Sampeyan nggawe grid ing wadah lan nempatake item-item ing jero.

```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 lan repeat()

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

`fr` ("fraction") ngebagi space sing ana — `1fr 2fr` bayen 1:2. `repeat(3, 1fr)` minangka singkatan para telu track sing padha.

## Grid responsif tanpa media queries

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

Baris siji iki nggawe grid kartu sing responsif sapenuhé: saben kolom minimal `250px`; browser ngene-o **sabisa mungkin** per baris lan ngubung sing liyane — otomatis saka 4 kolom ing desktop dadi 1 ing mobile. `auto-fit` + `minmax` minangka siji saka pola Grid sing paling digemari.

## Nempatake item-item ing 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-item bisa menjang pirang baris/kolom, nggawake layout majalah-style sing angel karo Flexbox.

## Grid lawan Flexbox

- **Grid** — layout 2D (baris *lan* kolom): layout kaca, grid kartu, dashboard.
- **Flexbox** — layout 1D (baris utawa kolom siji): navbar, grup tombol, center.

Kudu digabung karo apik — sel grid bisa dadi wadah flex sorèn.

## Kenapa iki penting

Grid minangka alat layout CSS sing paling kuwat — ngatasi layout full-page lan grid kartu responsif kanthi resik, asring nggantiake hack nested-div.

Pola responsif `auto-fit`/`minmax` piyé wae uwal saka butuh akeh media queries.