Kako z CSS Grid-om ustvarite razporeditev?

Question

Accepted Answer

**CSS Grid** je dvodimenzionalni sistem razporeditve — nadzoruje **vrstice in stolpce hkrati**, za razliko od Flexbox-a s samo eno linijo. Definirate mrežo na kontejnerju in vanjo postavite elemente.

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

## Enota fr in repeat()

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

`fr` ("fraction") distribuira razpoložljiv prostor — `1fr 2fr` ga razdeli 1:2. `repeat(3, 1fr)` je okrajšava za tri enake sledi.

## Odzivna mreža BREZ medijskih poizvedb

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

Ta ena vrstica ustvari popolnoma odzivno mrežo kartic: vsak stolpec je dolg najmanj `250px`; brskalnik jih ujame **čim več kot je mogoče** na vrsto in preostanek preusmeri v novo vrsto — samodejno se spremeniti od 4 stolpcev na namizju na 1 na mobilnih napravah. `auto-fit` + `minmax` je eden od najbolj priljubljenih vzorcev Grid-a.

## Umestitev elementov preko celic

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

Elementi so lahko razširjeni preko več vrstic/stolpcev, kar omogoča razporeditve v slogu revij, ki so s Flexbox-om neroden.

## Grid proti Flexbox-u

- **Grid** — 2D razporeditev (vrstice *in* stolpci): razporeditve strani, mrežice kartic, nadzorne plošče.
- **Flexbox** — 1D razporeditev (ena vrstica ali stolpec): navigacijske vrstice, skupine gumbov, centriranje.

Se dobro kombinirajo — celica Grid-a je lahko sama po sebi flex kontejner.

## Zakaj je to pomembno

Grid je najpoglejši CSS orodje za razporeditev — čisto obvlada razporeditve celotne strani in odzivne mrežice kartic, pogosto nadomešča trike z ugnezdenimi div-i.

Sam vzorec `auto-fit`/`minmax` za odzivnost odpravi potrebo po številnih medijskih poizvedbah.