Responsive Grid Layouts
CSS Grid makes responsive design surprisingly simple. With auto-fit, minmax, and media queries, you can create layouts that adapt seamlessly from mobile to desktop - often without a single media query.
Responsive Grid Techniques
- auto-fit + minmax - repeat(auto-fit, minmax(280px, 1fr)). Responsive without media queries
- auto-fill vs auto-fit - auto-fill keeps empty tracks; auto-fit collapses them. auto-fit is usually what you want
- Media query override - Change grid-template-columns at breakpoints for specific layouts
- Mobile-first grid - Start with 1 column, add columns at wider breakpoints
- clamp() for columns - grid-template-columns: clamp(200px, 30%, 400px) 1fr. Fluid sidebar widths
- Responsive template areas - Redefine grid-template-areas at different breakpoints to rearrange content
- Content-aware sizing - grid-template-columns: auto 1fr. First column fits content, second fills space
Responsive Grid Code
/* Method 1: No media queries needed! */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
/* Method 2: Mobile-first with breakpoints */
.manual-grid {
display: grid;
gap: 20px;
grid-template-columns: 1fr; /* Mobile: 1 column */
}
@media (min-width: 640px) {
.manual-grid {
grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */
}
}
@media (min-width: 1024px) {
.manual-grid {
grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
}
}
/* Method 3: Responsive page layout */
.page {
display: grid;
grid-template-areas: "main"; /* Mobile: single column */
gap: 24px;
}
@media (min-width: 768px) {
.page {
grid-template-columns: 250px 1fr;
grid-template-areas: "sidebar main";
}
}Tip
The auto-fit vs auto-fill distinction matters: auto-fit collapses empty columns so items stretch to fill the container, while auto-fill keeps empty column tracks. In most cases, auto-fit gives more pleasing results - items fill the row instead of leaving an awkward gap.
Mobile-first: start with mobile styles, enhance with min-width queries
Common Mistake
Using repeat(auto-fit, minmax(250px, 1fr)) and then wondering why items on the last row stretch to fill the full width. This is expected behavior - all remaining items share the available columns. If you want uniform card widths on the last row, use max-width on each card instead.
Practice Task
Compare 3 responsive grid methods: (1) repeat(auto-fit, minmax(250px, 1fr)) - no media queries, (2) explicit breakpoints with 1 → 2 → 3 columns, (3) a hybrid with clamp() for column widths. Resize the browser for each. Which method produces the smoothest responsive behavior?
Quick Quiz
Key Takeaways
- CSS Grid makes responsive design surprisingly simple.
- auto-fit + minmax - repeat(auto-fit, minmax(280px, 1fr)). Responsive without media queries
- auto-fill vs auto-fit - auto-fill keeps empty tracks; auto-fit collapses them. auto-fit is usually what you want
- Media query override - Change grid-template-columns at breakpoints for specific layouts