📱 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 */
auto-fit
Stretches items to fill space
Wide screen (1200px): ┌───────┬───────┬───────┬───────┐ │ 250 │ 250 │ 250 │ 250 │ └───────┴───────┴───────┴───────┘
auto-fill
Creates ghost columns
Wide screen (1200px): ┌─────┬─────┬─────┬─────┬─────┐ │Item │Item │Item │ │ │ └─────┴─────┴─────┴─────┴─────┘
📸 Real-World: 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;
}
/* Desktop: 4-5 columns, Tablet: 2-3 columns, Mobile: 1 column */
💡 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
“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.”