grid-template-areas અને પ્રતિક્રિયાશીલ ગ્રીડ્સ કેવી રીતે કાર્ય કરે છે?

Question

Accepted Answer

`grid-template-areas` તમને પ્રદેશોને નામ આપીને **દૃષ્ટિમાં** ગ્રીડ રચવાની સુવિધા આપે છે, જે જટિલ પૃષ્ઠ લેઆઉટને સુવાચ્ય અને પ્રતિક્રિયાશીલ રીતે પુનર્ગઠન કરવાનું સરળ બનાવે છે.

## નામકરણ કરેલ પ્રદેશો વ્યાખ્યાયિત કરવા

```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-કલા `grid-template-areas` *જ* લેઆઉટ છે — તમે એક નજરમાં બંધારણ જોઈ શકો છો, અને નામ પુનરાવર્તન એક પ્રદેશને કોષો પર વિસ્તૃત કરે છે.

## મોબાઈલ માટે પુનર્ગઠન — માત્ર નકશો ફરીથી દોરો

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

મોબાઈલ પર સમગ્ર લેઆઉટ બદલવા માટે, તમે ફક્ત પ્રદેશ નકશો ફરીથી લખો — HTML અને `grid-area` સોંપણી સમાન રહે છે. આ દરેક તત્વને અલગથી સ્થાને પુનઃસ્થાપિત કરવા કરતાં ખૂબ સ્વચ્છ છે.

## આ શા માટે શક્તિશાળી છે

- **સ્વ-દસ્તાવેજીકરણ** — CSS દૃષ્ટિમાં પ્રસ્તુત લેઆઉટને પ્રતિબિંબિત કરે છે.
- **સોર્સ ક્રમથી અસંબંધિત** — તત્વો HTML ક્રમ પર ધ્યાન આપ્યા વિનાં કોઈ પણ સ્થાને મૂકવામાં આવી શકે છે (DOM માં `main` પ્રથમ રાખવા માટે સારું અને તે પછી વિજ્યુઅલી પાસાબાર પ્રથમ દર્શાવવું).
- **સરળ પ્રતિક્રિયાશીલ પુનર્વિતરણ** — દરેક બ્રેકપોઈન્ટ પર પ્રદેશ ટેમ્પ્લેટ બદલો.

## તે શા માટે મહત્વપૂર્ણ છે

નામકરણ કરેલ ગ્રીડ પ્રદેશો પૃષ્ઠ-સ્તરીય લેઆઉટ (શીર્ષક/બાજુ/મુખ્ય/તળિયે) ને સુવાચ્ય અને નાણાંત્યં રીતે પ્રતિક્રિયાશીલ બનાવે છે — પુનર્બંધનો એક ASCII નકશે સંપાદન કરવાનો વિષય છે, સ્થાનો તારવણ નહીં.

તે CSS દ્વારા આપવામાં આવેલી સૌથી સ્પષ્ટ અને સુસંભાળ્યપણે રક્ષણીય લેઆઉટ તકનીકો પૈકી એક છે.