Jak stworzyć układ za pomocą CSS Grid?

Question

Accepted Answer

**CSS Grid** to dwuwymiarowy system layoutu — steruje **wierszami i kolumnami jednocześnie**, w przeciwieństwie do jednej linii Flexbox. Definiujesz siatkę na kontenerze i umieszczasz w niej elementy.

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

## Jednostka 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` ("fraction") rozkłada dostępną przestrzeń — `1fr 2fr` dzieli ją 1:2. `repeat(3, 1fr)` to skrót na trzy równe ścieżki.

## Responsywna siatka BEZ media queries

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

Ta pojedyncza linia tworzy w pełni responsywną siatkę kart: każda kolumna ma co najmniej `250px`; przeglądarka dopasowuje **tyle ile możliwe** na wiersz i opakowuje resztę — automatycznie przchodząc z 4 kolumn na pulpicie do 1 na urządzeniu mobilnym. `auto-fit` + `minmax` to jeden z ulubionych wzorców Grid.

## Umieszczanie elementów w komórkach

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

Elementy mogą rozciągać się na wiele wierszy/kolumn, umożliwiając układy w stylu magazynu, które są trudne w Flexbox.

## Grid vs Flexbox

- **Grid** — layout 2D (wiersze *i* kolumny): układy stron, siatki kart, pulpity nawigacyjne.
- **Flexbox** — layout 1D (pojedynczy wiersz lub kolumna): paski nawigacyjne, grupy przycisków, centrowanie.

Dobrze się komponują — komórka siatki może sama być kontenerem flex.

## Dlaczego to ważne

Grid to najpotężniejsze narzędzie do layoutu CSS — obsługuje pełnostronicowe układy i responsywne siatki kart czysto, często zastępując hacki zagnieżdżonych divów.

Sam wzorzec responsywny `auto-fit`/`minmax` eliminuje potrzebę wielu media queries.