CSS
Responsive Asymmetrical Two-Column Layout with CSS Grid
Learn to build a responsive two-column layout using CSS Grid, where columns have different widths and stack elegantly on smaller screens for optimal mobile viewing.
.grid-container {
display: grid;
grid-template-columns: 1fr 300px; /* One flexible column, one fixed */
gap: 20px;
padding: 20px;
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr; /* Stack columns on smaller screens */
}
}
/* Example child styles */
.main-content {
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
}
.sidebar {
background-color: #e0e0e0;
padding: 20px;
border-radius: 5px;
}
How it works: This snippet demonstrates how to create a responsive two-column layout using CSS Grid. It uses `grid-template-columns` to define a flexible column (`1fr`) and a fixed-width column (`300px`). A media query then collapses the layout to a single column on screens smaller than 768px, making it ideal for mobile devices, ensuring content adaptability without complex calculations.