# CSS Grid responsive — Responsive & Mobile-First Design

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

> Build auto-responsive layouts with CSS Grid's auto-fit, auto-fill, and minmax() — no media queries needed for simple grids.

## Grid auto-fit and auto-fill

`auto-fit` collapses empty tracks; `auto-fill` keeps them. Both allow columns to wrap automatically based on available space — no breakpoints required.

## Auto-responsive card grid

A grid that automatically arranges cards into rows, adapting to any screen size without media queries.

```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);
}
```

## Difference: auto-fit vs auto-fill

Subtle but important for alignment.

```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:** What does minmax(280px, 1fr) do in CSS Grid?

- [x] Ensures columns are at least 280px, grow to fill space
- [ ] Makes columns exactly 280px
- [ ] Limits columns to 280px maximum

*Answer:* Ensures columns are at least 280px, grow to fill space. minmax() sets both minimum and maximum values for flexible sizing.