Kako kreirate raspored pomoću CSS Grid?

Question

Accepted Answer

**CSS Grid** je dvodimenzionalni sustav rasporeda — kontrolira **redove i stupce istovremeno**, za razliku od Flexboxove jedne linije. Definirate mrežu na spremniku i postavljate stavke u nju.

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

## Jedinica fr i repeat()

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

`fr` ("frakcija") distribuira dostupan prostor — `1fr 2fr` ga dijeli 1:2. `repeat(3, 1fr)` je skraćenica za tri jednake staze.

## Responzivna mreža BEZ media upita

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

Ovaj jedan redak stvara u potpunosti responzivnu mrežu kartica: svaki stupac je najmanje `250px`; preglednik **prihvaća što više** po redu i prelama ostatak — automatski ide od 4 stupca na radnoj površini na 1 na mobitelu. `auto-fit` + `minmax` je jedan od najomiljenih uzoraka Grida.

## Postavljanje stavki kroz više ćelija

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

Stavke mogu obuhvatiti više redaka/stupaca, omogućavajući rasporede u stilu časopisa koji su nezgodni s Flexboxom.

## Grid vs Flexbox

- **Grid** — 2D raspored (redovi *i* stupci): rasporedi stranica, mreže kartica, kontrolne ploče.
- **Flexbox** — 1D raspored (jedan redak ili stupac): navigacijske trake, grupe gumba, centriranje.

Dobro se kombiniraju — ćelija mreže može sama biti flex spremnikom.

## Zašto je to važno

Grid je najmoćnije CSS alatno sredstvo za raspored — čisto obrađuje rasporede cijele stranice i responzivne mreže kartica, često zamjenjujući ugniježđene trikove s div-ovima.

Sam `auto-fit`/`minmax` responzivni obrazac uklanja potrebu za mnogim media upitima.