Hogyan működnek a grid-template-areas és a reszponzív rácsok?

Question

IT Interview Practice · Accepted Answer

A `grid-template-areas` lehetővé teszi, hogy **vizuálisan** elrendezze a rácsot a régiók elnevezésével, így az összetett oldal-elrendezések olvashatóak és könnyen átrendezhetőek reszponzív módon.

## Elnevezett területek meghatározása

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

Az ASCII-art `grid-template-areas` *maga az* elrendezés — egy pillantásra láthatja a szerkezetet, és a név megismétlése miatt egy régió terjedhet a cellákra.

## Átrendezés mobilra — csak rajzolja meg újra a térképet

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

A teljes elrendezés mobil eszközön történő módosításához csak írja be újra a terület-térképet — a HTML és a `grid-area` hozzárendelések maradnak azonosak. Ez sokkal tisztább, mint az egyes elemek külön-külön átpozicionálása.

## Miért ez erős

- **Önmagát dokumentáló** — a CSS vizuálisan tükrözi a megjelenített elrendezést.
- **Független a forrásorrendtől** — az elemek a HTML-sorrend függetlenül bárhová elhelyezhetők (jó a `main` DOM-ben történő első elhelyezéséhez az akadálymentességért, mégis az oldalsáv vizuálisan elsőként jelenik meg).
- **Könnyű reszponzív átrendezés** — cserélje ki a terület-sablont minden egyes töréspontnál.

## Miért fontos ez

Az elnevezett rácsatérületek az oldal-szintű elrendezéseket (fejléc/oldalsáv/fő/lábléc) egyaránt olvashatóvá és triviálisan reszponzívvá teszik — az átrendezés egy ASCII térkép szerkesztésére korlátozódik, nem pedig a pozíciók újrahuzalozására.

Ez az egyik legtisztább és legkönnyen karbantartható elrendezési technika, amelyet a CSS kínál.

Elnevezett területek meghatározása

Átrendezés mobilra — csak rajzolja meg újra a térképet

Miért ez erős

Miért fontos ez

Kapcsolódó kérdések