grid-template-areas اور responsive grids کیسے کام کرتے ہیں؟

Question

Accepted Answer

`grid-template-areas` آپ کو ایک grid کو **بصری طور پر** ناموں والے علاقوں کے ذریعے ترتیب دینے دیتا ہے، جو پیچیدہ صفحہ کی ترتیبوں کو قابلِ فہم اور جوابدہی سے دوبارہ ترتیب دینے میں آسان بناتا ہے۔

## نام والے علاقے کی تعریف

```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-art `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 کی ترتیب سے قطع نظر کہیں بھی رکھا جا سکتا ہے (یہ اچھا ہے `main` کو رسائی کے لیے DOM میں پہلے رکھنے کے لیے، پھر بھی عددی طور پر سائڈبار کو پہلے ظاہر کرتے ہوئے)۔
- **آسان جوابدہی بہاؤ** — ہر breakpoint پر علاقہ کا نقشہ بدلیں۔

## اس کا اہم مطلب

نام والے grid علاقے صفحہ کی سطح کی ترتیبوں (header/sidebar/main/footer) کو قابلِ فہم اور معمولی جوابدہی دونوں بناتے ہیں — تبدیلی ایک ASCII نقشہ میں ترمیم کا معاملہ ہے، نہ کہ مقامات کو دوبارہ وائر کرنا۔

یہ CSS کی سب سے واضح، سب سے قابلِ رکھ رکھاؤ ترتیب کی تکنیکوں میں سے ایک ہے۔