grid-template-areas மற்றும் பதிலளிக்கும் grids எவ்வாறு செயல்படுகின்றன?

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` ஒதுக்கீடுகள் ஒரே மாதிரியாக இருக்கும். இது ஒவ்வொரு உপাதனையையும் தனித்தனியாக மாற்றிசெய்வதை விட மிகவும் சுத்தமாக உள்ளது.

## இது ஏன் சக்திशalী

- **தன்-ஆவணப்படுத்தல்** — CSS பரந்த வரையறுக்கப்பட்ட வடிவமைப்பைக் கண்ணாடி செய்கிறது.
- **மூல வரிசையிலிருந்து பிரிந்தது** — HTML வரிசையைப் பொருட்படுத்தாமல் உपाधनைகளை எங்குவேண்டுமென்று வைக்கலாம் (DOM-ல் `main` முதலில் வைப்பது அணுகுநிலைக்கு நல்லது, ஆனால் பக்கவாட்டுப் பட்டையை முதலில் பார்வையளவில் காண்பிக்க).
- **சற்றும் பதிலளிக்கும் பிரவாஹம்** — ஒவ்வொரு பிரேக்பாயிண்டுக்கும் பகுதி வடிவத்தை மாற்றவும்.

## ஏன் இது முக்கியமாகும்

பெயரிடப்பட்ட நெட்-பகுதிகள் பக்க-நிலை வடிவங்களை (தலைப்பு/பக்கவாட்டுப் பட்டை/முக்கிய/கால்பாதை) படிக்கக்கூடியதாகவும் சாதாரணமாக பதிலளிக்கக்கூடியதாகவும் செய்கின்றன — மறுகட்டமைப்பு என்பது ASCII வரைபடத்தை திருத்தும் விஷயம், நிலைகளை மீண்டும் திரிக்க வேண்டியதல்ல।

இது CSS வழங்கும் மிகத் தெளிவான, மிகவும் பரிணாமிக்கக்கூடிய வடிவ நுட்பங்களில் ஒன்றாகும்.