Cum creezi un layout cu CSS Grid?

Question

Accepted Answer

**CSS Grid** este un sistem de layout bidimensional — controlează **rânduri și coloane simultan**, spre deosebire de linia unică din Flexbox. Definiți o grilă pe container și plasați articole în ea.

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

## Unitatea 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") distribuie spațiu disponibil — `1fr 2fr` o împarte 1:2. `repeat(3, 1fr)` este prescurtare pentru trei piste egale.

## Grilă receptivă FĂRĂ media queries

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

Această singură linie creează o grilă de cărți complet receptivă: fiecare coloană este cel puțin `250px`; browserul se potrivește **cât mai mult posibil** pe rând și înfășoară restul — mergând automat de la 4 coloane pe desktop la 1 pe mobil. `auto-fit` + `minmax` este unul dintre modelele cele mai iubite din Grid.

## Plasarea articolelor pe celule

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

Articolele pot să se întindă pe mai multe rânduri/coloane, permițând layout-uri în stil revistă care sunt dificile cu Flexbox.

## Grid vs Flexbox

- **Grid** — Layout 2D (rânduri *și* coloane): layout-uri de pagină, grile de cărți, tablouri de bord.
- **Flexbox** — Layout 1D (un rând sau coloană singular): bare de navigare, grupuri de butoane, centrare.

Se compun bine — o celulă de grilă poate fi ea însăși un container flex.

## De ce este important

Grid este cel mai puternic instrument de layout CSS — gestionează layout-uri cu pagină întreagă și grile de cărți receptive curat, adesea înlocuind trucuri cu div-uri imbricate.

Modelul receptiv `auto-fit`/`minmax` singur elimină necesitatea multor media queries.