Kaip sukurti maketą su CSS Grid?

Question

Accepted Answer

**CSS Grid** yra dvimatis išdėstymo sistema — ji kontroliuoja **eilutes ir stulpelius vienu metu**, skirtingai nuo Flexbox, kuris yra vienos linijos. Jūs apibrėžiate tinklelį konteineryje ir į jį dėliojaте elementus.

```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 vienetas ir repeat()

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

`fr` („frakcija") paskirsto galimą vietą — `1fr 2fr` ją dalija 1:2 santykiu. `repeat(3, 1fr)` yra sutrumpintas žymėjimas trims vienodiems takeliams.

## Atsakus tinklelis BE media užklausų

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

Šita viena eilutė sukuria visiškai atsakų kortelių tinklelį: kiekvienas stulpelis yra mažiausiai `250px`; naršyklė telpa **kuo daugiau** per eilutę ir nutolina likusius — automatiškai keičiasi iš 4 stulpelių kompiuteryje į 1 mobiliajame įrenginyje. `auto-fit` + `minmax` yra vienas iš labiausiai mėgiamų Grid šablonų.

## Elementų dėliojimas per ląsteles

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

Elementai gali perimti kelias eilutes/stulpelius, suteikdami galimybę kurti žurnalo stiliaus maketą, kuris yra nepatogus naudojant Flexbox.

## Grid ir Flexbox palyginimas

- **Grid** — 2D išdėstymas (eilutės *ir* stulpeliai): puslapio maketai, kortelių tinkleliai, saugyklos.
- **Flexbox** — 1D išdėstymas (viena eilutė arba stulpelis): navigacijos juostos, mygtukai grupėse, centravimas.

Jie gerai sudaro — tinklelio langelis gali būti ir patikrintas kaip flex konteineris.

## Kodėl tai svarbu

Grid yra galingiausias CSS išdėstymo įrankis — jis tvarkingai tvarko visą puslapį ir atsakius kortelių tinklelius, dažnai pakeičiant įdėtų div haikus.

Samprotavimas `auto-fit`/`minmax` atsako šablonu vienas pašalina poreikį daugeliui media užklausų.