Hogyan hozhat létre elrendezést CSS Grid-del?

Question

Accepted Answer

**CSS Grid** egy kétdimenziós elrendezési rendszer — **sorok és oszlopok egyidejű** vezérlésére használható, ellentétben a Flexbox egyetlen sorával. Egy rácsot definiálsz a tárolóban, és elemeket helyezel bele.

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

## Az fr egység és a repeat()

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

A `fr` ("fraction") az elérhető helyet osztja fel — az `1fr 2fr` 1:2 arányban osztja fel. A `repeat(3, 1fr)` rövidítése a három egyenlő sávnak.

## Reszponzív rács MÉDIA LEKÉRDEZÉSEK NÉLKÜL

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

Ez az egy sor egy teljes mértékben reszponzív kártyarácsot hoz létre: minden oszlop legalább `250px` széles; a böngésző **annyi oszlopot fér** soronként, amennyi lehetséges, és az többit leomlik — asztalokon 4 oszlopról mobil eszközökön 1 oszlopra automatikusan vált. Az `auto-fit` + `minmax` kombinációja a Grid egyik legkedveltebb mintája.

## Elemek elhelyezése több cellán keresztül

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

Az elemek több sorra/oszlopra kiterjedhetnek, lehetővé téve a magazinstílusú elrendezéseket, amelyek a Flexboxszal kényelmetlenek.

## Grid vs Flexbox

- **Grid** — 2D elrendezés (sorok *és* oszlopok): oldal-elrendezések, kártyarácsok, irányítópultok.
- **Flexbox** — 1D elrendezés (egy sor vagy oszlop): navigációs sáv, gombcsoportok, középre igazítás.

Jól összeilleszkednek — egy rácsacella maga is flex tároló lehet.

## Miért fontos

A Grid a legerősebb CSS elrendezési eszköz — tisztán kezeli az oldal-szintű elrendezéseket és a reszponzív kártyarácsokat, gyakran helyettesítve a beágyazott div trükköket.

Az `auto-fit`/`minmax` reszponzív minta egyedül számos média lekérdezés szükségességét szünteti meg.