Kuinka luot asettelun CSS Gridillä?

Question

Accepted Answer

**CSS Grid** on kaksiulotteinen asettelujärjestelmä — se ohjaa **rivejä ja sarakkeita samanaikaisesti**, toisin kuin Flexboxin yksittäinen rivi. Määrität säiliöön ruudukon ja sijoitat siihen elementtejä.

```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 */
}
```

## fr-yksikkö ja repeat()

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

`fr` ("fraktio") jakaa käytettävissä olevan tilan — `1fr 2fr` jakaa sen suhteessa 1:2. `repeat(3, 1fr)` on lyhennys kolmelle yhtäläiselle radalle.

## Responsiivinen ruudukko ILMAN mediakyselyitä

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

Tämä yksi rivi luo täysin responsiivisen korttien ruudukon: jokainen sarake on vähintään `250px`; selain sovittaa **niin monta kuin mahdollista** riville ja käärii loput — vaihtuu automaattisesti 4 sarakkeesta työpöydällä 1:een mobiilissa. `auto-fit` + `minmax` on yksi Gridiin rakastuneihin malleista.

## Elementtien sijoittaminen soluissa

```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 */
```

Elementit voivat ulottua useille riveille/sarakkeille, mikä mahdollistaa lehden tyylisiä asetteluja, jotka ovat kiusallisia Flexboxilla.

## Grid vs Flexbox

- **Grid** — 2D-asettelu (rivit *ja* sarakkeet): sivun asettelut, korttien ruudukot, koontinäytöt.
- **Flexbox** — 1D-asettelu (yksi rivi tai sarake): navigointipalkit, painikeryhmät, keskitys.

Ne toimivat hyvin yhdessä — ruudukon solu voi itsessään olla flex-säiliö.

## Miksi se on tärkeää

Grid on tehokkain CSS-asettelun työkalu — se käsittelee koko sivun asetteluja ja responsiivisia korttien ruudukkoita siististi, usein korvaten sisäkkäisiä div-temppuja.

Pelkästään `auto-fit`/`minmax` responsiivinen malli poistaa tarpeen monille mediakyselyille.