Jak działają grid-template-areas i siatki responsywne?

Question

Accepted Answer

`grid-template-areas` pozwala ci rozmieścić siatkę **wizualnie** poprzez nadawanie nazw regionom, czyniąc złożone układy strony czytelnym i łatwymi do reorganizacji w sposób responsywny.

## Definiowanie nazwanych obszarów

```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-artowe `grid-template-areas` *to* układ — możesz dostrzec strukturę na pierwszy rzut oka, a powtórzenie nazwy powoduje, że region rozciąga się na komórki.

## Reorganizacja na urządzeniach mobilnych — po prostu przerysujesz mapę

```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";
  }
}
```

Aby zmienić cały układ na urządzeniach mobilnych, wystarczy przepisać mapę obszarów — kod HTML i przypisania `grid-area` pozostają identyczne. To jest dużo czystsze niż zmiana pozycji każdego elementu indywidualnie.

## Dlaczego to ważne

- **Autodokumentujące się** — CSS wizualnie odzwierciedla renderowany układ.
- **Niezależne od kolejności źródła** — elementy mogą być umieszczane gdziekolwiek niezależnie od kolejności HTML (dobrze dla umieszczenia `main` na początek DOM dla dostępności, a wyświetlenia sidebara na początku wizualnie).
- **Łatwy responsywny reflow** — zamień szablon obszaru na punkt przerwania.

## Dlaczego to ważne

Nazwane obszary siatki sprawiają, że układy na poziomie strony (nagłówek/sidebar/main/stopka) są zarówno czytelne, jak i trivialnie responsywne — restrukturyzacja to kwestia edycji mapy ASCII, a nie przepinania pozycji.

Jest to jedna z najjaśniejszych, najbardziej łatwych w utrzymaniu technik układu, jakie CSS oferuje.