तपाईं 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` ("fraction") उपलब्ध स्थान वितरण गर्छ — `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` प्रतिक्रियाशील ढाँचा एकै मानिसले धेरै मीडिया क्वेरीहरूको आवश्यकता हटाता है।