Conas a fheidhmíonn grid-template-areas agus greillí freagartha?

Question

IT Interview Practice · Accepted Answer

Ligeann `grid-template-areas` duit greille a leagan amach **go bhisiúil** trí réigiúin a ainmniú, rud a fhágann go bhíonn leagan amach casta ar an leathanach inléite agus furasta athrú go freagartha.

## Limistéir ainmnithe a shainiú

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

Is *é* an `grid-template-areas` ealaín ASCII an leagan amach — is féidir leat an struchtúr a fheiceáil ar an toirt, agus nuair a dhéanann tú ainm a athdhéanamh bíonn réigiún in ann spréacharnach a dhéanamh ar chillí.

## Athrú i gcomhair soghluaiste — nach mór duit an sprioclíonn a athadhchóiriú

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

Chun an leagan amach iomlán a athrú ar fhón soghluaiste, scríobhann tú an sprioclíonn na limistéir arís — fanann an HTML agus an tascríobh `grid-area` mar a raibh siad. Tá sé i bhfad níos geal ná gach eilimint a atháirithe ar an sprioclíonn.

## Cén fáth ar bhreá linn seo

- **Féindhéanta** — léiríonn an CSS go bhisiúil an leagan amach a tugadh ar an scáileán.
- **Neamhspleách ar ord an bhunús** — is féidir eilimintí a chur i láthair áit ar bith beag beann ar ord an HTML (deas chun `main` a chur ar tús sa DOM ar son inrochtaineachta, ach an bharra thaobh a thaispeáint ar tús go bhisiúil).
- **Athrá freagartha éasca** — cuir an pátrún limistéir in ionad gach briseadh.

## Cén fáth ar bhreá linn seo

Fágann limistéir greille ainmnithe go bhíonn leagan amach ar leibhéal an leathanaigh (ceanntásc/bharra thaobh/príomhábhar/bonn) inléite agus tuigthe go freagartha — is i bhfad níos simplí athruithe an leagan amach trí sprioclíonn ASCII a athadhchóiriú.

Is ceann de na teicníocha leagan amach is soiléire agus is inbhuanaithe a thugann CSS ar fáil.

Limistéir ainmnithe a shainiú

Athrú i gcomhair soghluaiste — nach mór duit an sprioclíonn a athadhchóiriú

Cén fáth ar bhreá linn seo

Cén fáth ar bhreá linn seo

Ceisteanna gaolmhara