آپ CSS Grid کے ساتھ ایک layout کیسے بناتے ہیں؟

Question

Accepted Answer

**CSS Grid** ایک دو جہتی layout نظام ہے — یہ **rows اور columns کو بیک وقت** کنٹرول کرتا ہے، Flexbox کی single line کے برعکس۔ آپ container پر ایک grid define کرتے ہیں اور items کو اس میں رکھتے ہیں۔

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## fr unit اور repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr` ("fraction") دستیاب space کو distribute کرتا ہے — `1fr 2fr` اسے 1:2 میں تقسیم کرتا ہے۔ `repeat(3, 1fr)` تین برابر tracks کے لیے shorthand ہے۔

## Responsive grid بغیر media queries کے

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

yہ ایک لائن ایک مکمل responsive card grid بناتی ہے: ہر column کم از کم `250px` ہے؛ browser **جتنے ممکن ہو** ہر row میں fit کرتا ہے اور باقی کو wrap کرتا ہے — خودکار طور پر desktop پر 4 columns سے mobile پر 1 تک جاتا ہے۔ `auto-fit` + `minmax` Grid کے سب سے پسند patterns میں سے ایک ہے۔

## Items کو cells کے پار رکھنا

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

Items متعدد rows/columns پر span کر سکتے ہیں، جو magazine-style layouts کو ممکن بناتا ہے جو Flexbox کے ساتھ مشکل ہیں۔

## Grid بمقابلہ Flexbox

- **Grid** — 2D layout (rows *اور* columns): page layouts، card grids، dashboards۔
- **Flexbox** — 1D layout (ایک single row یا column): navbars، button groups، centering۔

یہ اچھی طرح compose ہوتے ہیں — ایک grid cell خود ایک flex container ہو سکتا ہے۔

## کیوں یہ اہم ہے

Grid سب سے طاقتور CSS layout ٹول ہے — یہ full-page layouts اور responsive card grids کو صاف ستھرا طریقے سے handle کرتا ہے، اکثر nested-div hacks کی جگہ لے رہا ہے۔

`auto-fit`/`minmax` responsive pattern اکیلا بہت سے media queries کی ضرورت کو ختم کرتا ہے۔