Si funksionojnë grid-template-areas dhe rrjetat përgjigje ndaj?

Question

Accepted Answer

`grid-template-areas` ju lejon të vendosni një rrjet **vizualisht** duke emërtuar rajone, duke bërë që paraqjet komplekse të faqes të jenë të lexueshme dhe të lehta për t'u riorganizuar përgjigje.

## Përcaktimi i zonave të emëruara

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

Arte `grid-template-areas` ASCII *është* vetë paraqja — mund ta shihni strukturën në shikim të parë, dhe përsëritja e një njohu e bën një rajon të shtrihet nëpër qeliza.

## Rirregullimi për celular — thjesht rivendosni hartën

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

Për të ndryshuar të gjithë paraqjen për celularin, thjesht rishkruani hartën e zonës — HTML-ja dhe `grid-area` zatimet mbeten identike. Kjo është shumë më e pastër sesa riposicionimi i secilit elementi individualisht.

## Pse kjo është e fuqishme

- **Vetëdokumentuese** — CSS pasqyron vizualisht paraqjen e dhënë.
- **E shkëputur nga rendi i burimit** — elementet mund të vendosen kudo pavarësisht rendit HTML (mirë për vendosjen e `main` të parë në DOM për aksesibilitet, megjithatë shfaqjen e shiritit anësor të parë vizualisht).
- **Riflim i lehtë përgjigje** — zëvendësoni temën e zonës për secilin pikë ndërprerje.

## Pse është e rëndësishme

Zonat e emëruara të rrjetës e bëjnë paraqjet në nivel faqe (header/anëbar/kryesor/footer) të lexueshme dhe trivialke përgjigje — ristrukturimi është çështje e redaktimit të një harté ASCII, jo interfaktur pozicioner.

Është njëra nga teknikat më të qarta dhe më të mirëmbajtshme për paraqjen që CSS ofron.