# CSS Grid responsive — उत्तरदायी और मोबाइल-प्रथम डिज़ाइन

Source: https://www.geekswithgeeks.com/hi/responsive-design/css-grid-responsive

> CSS Grid के auto-fit, auto-fill, और minmax() के साथ auto-responsive layouts बनाएँ — simple grids के लिए media queries की जरूरत नहीं।

## Grid auto-fit और auto-fill

`auto-fit` empty tracks को collapse करता है; `auto-fill` उन्हें keep करता है। दोनों columns को available space के आधार पर automatically wrap करने देते हैं — breakpoints की जरूरत नहीं।

## Auto-responsive card grid

एक grid जो automatically cards को rows में arrange करता है, media queries के बिना किसी भी screen size के अनुसार adapt करता है।

```css
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
```

## अंतर: auto-fit बनाम auto-fill

Alignment के लिए subtle लेकिन महत्वपूर्ण।

```css
/* auto-fit: collapses empty columns, items stretch to fill */
.grid-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* auto-fill: keeps empty columns, items don't stretch */
.grid-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
```

**Quiz:** CSS Grid में minmax(280px, 1fr) क्या करता है?

- [x] Columns को कम से कम 280px सुनिश्चित करता है, space भरने के लिए grow करता है
- [ ] Columns को बिल्कुल 280px बनाता है
- [ ] Columns को 280px तक limit करता है

*Answer:* Columns को कम से कम 280px सुनिश्चित करता है, space भरने के लिए grow करता है. minmax() flexible sizing के लिए minimum और maximum दोनों values set करता है।