તમે 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 લેઆઉટ (એક જ પંક્તિ અથવા સ્તંભ): નેવિગેશન બાર્સ, બટન ગ્રુપ્સ, કેન્દ્રીય.

તેઓ સારી રીતે રચાય છે — ગ્રીડ સેલ પોતે જ flex કન્ટેનર હોઈ શકે છે.

## તે શા માટે મહત્ત્વપૂર્ણ છે

Grid સૌથી શક્તિશાળી CSS લેઆઉટ સાધન છે — તે સંપૂર્ણ-પૃષ્ઠ લેઆઉટ્સ અને પ્રતિક્રિયાશીલ કાર્ડ ગ્રીડ્સને સ્વચ્છતાથી સંભાળે છે, ઘણીવાર નેસ્ટેડ-div હેક્સ બદલીને.

`auto-fit`/`minmax` પ્રતિક્રિયાશીલ પેટર્ન એકલો অনেক મીડિયા ક્વેરીઝની જરૂરિયાતને દૂર કરે છે.