📱 Responsive Grids, Zero Media Queries
Media queries for every breakpoint? Tedious. Grid auto-fit/auto-fill creates responsive layouts automatically. Items reflow based on space available.
The Magic Formula
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
/* That's it! Fully responsive without media queries
Items wrap automatically based on available space */
🎯 How It Works
repeat(auto-fit, minmax(250px, 1fr)) Breaking it down: - repeat(): Create columns - auto-fit: As many columns as fit - minmax(250px, 1fr): Min 250px, max 1 fraction Wide screen (1200px): ┌───────┬───────┬───────┬───────┐ │ 250 │ 250 │ 250 │ 250 │ (4 columns) └───────┴───────┴───────┴───────┘ Medium screen (800px): ┌───────┬───────┬───────┐ │ 266 │ 266 │ 266 │ (3 columns) └───────┴───────┴───────┘ Small screen (500px): ┌───────┬───────┐ │ 250 │ 250 │ (2 columns) └───────┴───────┘ Tiny screen (300px): ┌───────┐ │ 300 │ (1 column, stretches to fill) └───────┘ Automatic reflow!
auto-fit vs auto-fill
auto-fit
Stretches items to fill space
3 items, wide screen: ┌──────────┬──────────┬──────────┐ │ Item │ Item │ Item │ └──────────┴──────────┴──────────┘ Each item expands to fill width
auto-fill
Creates ghost columns
3 items, wide screen: ┌─────┬─────┬─────┬─────┬─────┐ │Item │Item │Item │ │ │ └─────┴─────┴─────┴─────┴─────┘ Items stay minimum width
/* Use auto-fit when:
You want items to stretch and fill space */
.gallery {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* Use auto-fill when:
You want consistent item sizes, allow empty space */
.product-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
Real-World Examples
📸 Image Gallery
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
.gallery img {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 8px;
}
/* Responsive without media queries!
Desktop: 4-5 columns
Tablet: 2-3 columns
Mobile: 1 column */
🛍️ Product Cards
.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
padding: 2rem;
}
.product-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* auto-fill ensures cards stay ~300px
Extra space on right if not enough items */
✅ When to Use
- Image galleries: Photos that should fill space
- Product grids: E-commerce item listings
- Card layouts: Blog posts, team members
- Icon grids: Feature showcases
- Dashboard widgets: Admin panels
💡 Pro Tips
- Adjust min width: Change 250px based on content needs
- Add max width:
minmax(250px, 400px)to prevent too large items - Dense packing:
grid-auto-flow: densefills gaps - Fallback: Add media query for very old browsers
🎯 Cheat Sheet
| Pattern | Behavior |
|---|---|
auto-fit |
Stretch items to fill |
auto-fill |
Keep min size, allow gaps |
minmax(250px, 1fr) |
Min 250px, max equal fractions |
gap: 1rem |
Space between items |
“Removed 200 lines of media query CSS. One line with auto-fit replaced it all. Product grid now works perfectly from 320px to 4K displays. CSS Grid is magic.”