CSS
Two-Column Layout with CSS Grid
Create a simple, responsive two-column layout for sidebar and main content using CSS Grid, adapting easily for different screen sizes and devices.
.grid-layout {
display: grid;
grid-template-columns: 1fr; /* Single column by default for mobile */
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 768px) {
.grid-layout {
grid-template-columns: 250px 1fr; /* Sidebar (fixed 250px) and Main (flexible) */
}
}
.sidebar {
background-color: #f8f9fa;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.main-content {
background-color: #ffffff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
How it works: This CSS snippet creates a responsive two-column layout using CSS Grid. By default, it employs a single column (`grid-template-columns: 1fr;`) for mobile-first design, ensuring optimal viewing on small screens. For larger screens (768px and up), a media query updates `grid-template-columns` to `250px 1fr;`, creating a fixed-width sidebar on the left and a flexible main content area that takes up the remaining space. `gap` adds consistent spacing between the columns, providing a robust and adaptable layout structure for various screen sizes.