CSS
Advanced Responsive Article Layout with CSS Grid
Design complex, responsive article layouts using CSS Grid, leveraging explicit column/row placement and spanning for precise content arrangement across breakpoints.
.article-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Default responsive columns */
gap: 30px;
padding: 20px;
}
.main-content {
grid-column: 1 / -1; /* Spans all columns by default */
}
.sidebar {
/* Default stacking */
}
@media (min-width: 768px) {
.article-grid {
grid-template-columns: 2fr 1fr; /* Two columns: content + sidebar */
}
.main-content {
grid-column: 1 / 2; /* Main content takes the first column */
}
.sidebar {
grid-column: 2 / 3; /* Sidebar takes the second column */
grid-row: 1 / span 2; /* Sidebar can span multiple rows if needed */
}
.related-posts {
grid-column: 1 / 2; /* Related posts below main content */
}
}
How it works: This snippet illustrates building a sophisticated responsive article layout using CSS Grid. It starts with a flexible column setup using `repeat(auto-fit, minmax())`. Media queries then refine the `grid-template-columns` property for larger screens, and individual items (`.main-content`, `.sidebar`) use `grid-column` and `grid-row` to control their precise placement and span across grid cells, allowing for complex arrangements like sidebars that stretch vertically alongside main content.