CSS Grid ఉపయోగించి layout ను ఎలా సృష్టించాలి?

Question

Accepted Answer

**CSS Grid** ఒక రెండు-డైమెన్షనల్ layout సిస్టమ్ — ఇది **rows మరియు columns లను ఏకకాలంలో నియంత్రిస్తుంది**, Flexbox యొక్క సింగిల్ లైన్ కాకుండా. మీరు container పై grid ను నిర్వచించి, 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 ను పంపిణీ చేస్తుంది — `1fr 2fr` దానిని 1:2 నిష్పత్తిలో విభజిస్తుంది. `repeat(3, 1fr)` మూడు సమాన tracks కోసం shorthand.

## NO media queries కలిగిన Responsive grid

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

ఈ ఒక లైన్ పూర్తిగా responsive card grid ను సృష్టిస్తుంది: ప్రతి column కనీసం `250px`; browser ఎక్కువ సంఖ్యలో సాధ్యమైనంతవరకు column లను 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 vs Flexbox

- **Grid** — 2D layout (rows *మరియు* columns): page layouts, card grids, dashboards.
- **Flexbox** — 1D layout (ఒక సింగిల్ row లేదా column): navbars, button groups, centering.

వాటి సమ్మేళనం బాగా పనిచేస్తుంది — ఒక grid cell స్వయంగా flex container గా ఉండగలదు.

## ఇది ఎందుకు ముఖ్యమైనది

Grid అత్యంత శక్తిశాలీ CSS layout టూల్ — ఇది full-page layouts మరియు responsive card grids లను cleanly హ్యాండిల్ చేస్తుంది, తరచుగా nested-div hacks ను భర్తీ చేస్తుంది.

`auto-fit`/`minmax` responsive pattern మాత్రమే అనేక media queries కోసం అవసరతను తొలగిస్తుంది.