तुम CSS Grid सह लेआउट कसे तयार करता?

Question

Accepted Answer

**CSS Grid** एक द्वि-आयामी लेआउट प्रणाली आहे — ते **पंक्ती आणि स्तंभ एकाच वेळी नियंत्रित** करते, Flexbox च्या एकल ओळीच्या विपरीत. तुम्ही कंटेनरवर ग्रिड परिभाषित करता आणि आयटम त्यात ठेवता.

```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 युनिट आणि repeat()

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

`fr` ("अंश") उपलब्ध जागा वितरित करते — `1fr 2fr` हे 1:2 मध्ये विभाजित करते. `repeat(3, 1fr)` हे तीन समान ट्रॅकसाठी शॉर्टहँड आहे.

## मीडिया क्वेरीशिवाय प्रतिक्रियाशील ग्रिड

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

ही एक ओळ पूर्णपणे प्रतिक्रियाशील कार्ड ग्रिड तयार करते: प्रत्येक स्तंभ किमान `250px` आहे; ब्राउজर **शक्य तितके** स्तंभ प्रति पंक्तीमध्ये बसवते आणि बाकीचे गुंडाळते — स्वयंचलितपणे डेस्कटपवर 4 स्तंभांपासून मोबाइलवर 1 पर्यंत जाते. `auto-fit` + `minmax` Grid चा सर्वात आवडता नमुना आहे.

## आयटमांना सेलमध्ये ठेवणे

```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 */
```

आयटम अनेक पंक्ती/स्तंभांमध्ये विस्तारित होऊ शकतात, ज्यामुळे मॅगझिन-शैलीचे लेआउट शक्य होतात जे Flexbox सह अस्पष्ट आहेत.

## Grid विरुद्ध Flexbox

- **Grid** — 2D लेआउट (पंक्ती *आणि* स्तंभ): पृष्ठ लेआउट, कार्ड ग्रिड, डॅशबोर्ड.
- **Flexbox** — 1D लेआउट (एकल पंक्ती किंवा स्तंभ): नॅव्हबार, बटण गट, केंद्रीकरण.

ते चांगल्या प्रकारे रचना करतात — ग्रिड सेल स्वयं एक फ्लेक्स कंटेनर असू शकता.

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

Grid सर्वात शक्तिशाली CSS लेआउट साधन आहे — हे पूर्ण-पृष्ठ लेआउट आणि प्रतिक्रियाशील कार्ड ग्रिड स्वच्छपणे हाताळते, अनेकदा नेस्टेड-div हॅक बदलते.

`auto-fit`/`minmax` प्रतिक्रियाशील नमुना एकटा अनेक मीडिया क्वेरीची आवश्यकता दूर करते.