CSS
Responsive Grid Layout with Media Queries
Implement a fully responsive multi-column grid layout adapting to screen sizes with CSS Grid and traditional media queries for predictable design control.
.grid-container {
display: grid;
grid-template-columns: 1fr; /* Default: single column for small screens */
gap: 20px; /* Spacing between grid items */
padding: 15px;
}
.grid-item {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
border: 1px solid #ccc;
}
/* Medium screens: 2 columns */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
/* Large screens: 3 columns */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
}
}
How it works: This snippet shows how to create a responsive multi-column grid layout using CSS Grid combined with traditional media queries. Initially, the grid is set to a single column for smaller screens (`grid-template-columns: 1fr`).
As the viewport width increases, media queries kick in to redefine `grid-template-columns`, changing the layout to two columns (`repeat(2, 1fr)`) for medium screens and three columns (`repeat(3, 1fr)`) for larger screens. The `gap` property ensures consistent spacing between grid items.