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 मध्ये प्रथम ठेवण्यासाठी अ‍ॅक्सेस करण्यायोग्यतेसाठी चांगले, तरी दृष्टीने बाजूला अव‍ॅव्हिष्ठ करते).
- **सहज प्रतिक्रिया प्रवाह** — ब्रेकपॉइंटप्रति क्षेत्र नमुना स्वॅप करा.

## हे का महत्त्वाचे आहे

नामांकित ग्रिड क्षेत्र पृष्ठ-स्तरीय लेआउट (शीर्षकाग्र/बाजू पट्टा/मुख्य/अंत पाद) वाचनीय आणि साधारण रित्या प्रतिक्रिया विषयक बनवतात — पुनर्संरचना ASCII नक्शा संपादित करण्याचे प्रश्न आहे, न की स्थान पुनर्वेधन.

हे CSS द्वारे ऑफर केलेल्या सर्वाधिक स्पष्ट, सर्वाधिक टिकाऊ लेआउट तंत्रांपैकी एक आहे.