Cum funcționează grid-template-areas și grilele responsive?

Question

Accepted Answer

`grid-template-areas` vă permite să faceți layout unei grile **vizual** prin denumirea regiunilor, făcând layouturi complexe de pagină lizibile și ușor de reorganizat responsive.

## Definirea zonelor denumite

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* row 1: header spans both columns */
    "sidebar main"     /* row 2: sidebar | main */
    "footer  footer";  /* row 3: footer spans both */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* assign each element to a named area */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

ASCII-art `grid-template-areas` *este* layoutul — puteți vedea structura într-o privire, iar repetarea unui nume face o regiune să se întindă pe mai multe celule.

## Reorganizarea pentru mobil — redraw-ați doar harta

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* single column */
    grid-template-areas:
      "header"
      "main"      /* main now ABOVE sidebar on mobile */
      "sidebar"
      "footer";
  }
}
```

Pentru a schimba întregul layout pentru mobil, pur și simplu rescrieți harta de zone — HTML-ul și atribuirile `grid-area` rămân identice. Aceasta este mult mai curat decât repoziționarea fiecărui element individual.

## De ce este puternic

- **Autodocumentat** — CSS-ul oglindește vizual layoutul randat.
- **Decuplat de ordinea sursă** — elementele pot fi plasate oriunde, indiferent de ordinea HTML (bun pentru a pune `main` mai întâi în DOM pentru accesibilitate, dar afișând sidebar-ul mai întâi vizual).
- **Reflux responsive ușor** — schimbați șablonul de zone per breakpoint.

## De ce conteaza

Ariile de grilă denumite fac layouturi la nivel de pagină (header/sidebar/main/footer) atât lizibile cât și ușor responsive — restructurarea este o chestiune de editare a unei hărți ASCII, nu de reconectare a pozițiilor.

Este una dintre cele mai clare și mai ușor de menținut tehnici de layout pe care le oferă CSS.