CSS
Responsive Article Layout with CSS Grid and Media Queries
Craft a dynamic, multi-column article layout that gracefully adapts to various screen sizes using CSS Grid in combination with traditional media queries for responsiveness.
.article-grid {
display: grid;
grid-template-columns: 1fr; /* Default: single column on small screens */
gap: 20px;
padding: 15px;
}
.article-item {
background-color: #fefefe;
border: 1px solid #eee;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 8px;
}
@media (min-width: 768px) {
.article-grid {
grid-template-columns: repeat(2, 1fr); /* Two columns on medium screens */
}
}
@media (min-width: 1024px) {
.article-grid {
grid-template-columns: repeat(3, 1fr); /* Three columns on large screens */
}
}
How it works: This snippet demonstrates how to build a responsive article or card layout using CSS Grid and media queries. The `article-grid` container is set to `display: grid`. Initially, it's a single column (`grid-template-columns: 1fr`). Media queries then adjust `grid-template-columns` to `repeat(2, 1fr)` for medium screens and `repeat(3, 1fr)` for large screens, creating a multi-column effect that adapts gracefully without relying on `auto-fit` or `minmax()`.