CSS
Building a Basic Two-Column Layout with CSS Grid
Implement a straightforward two-column layout using CSS Grid, ideal for sidebars and main content areas, with easily controllable column widths for web pages.
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr; /* Sidebar (1fr) and Main Content (3fr) */
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
border: 1px solid #ccc;
}
.sidebar {
background-color: #f0f0f0;
padding: 15px;
border-radius: 5px;
}
.main-content {
background-color: #e0e0e0;
padding: 15px;
border-radius: 5px;
}
How it works: This snippet creates a basic two-column layout using CSS Grid. The `.grid-container` is set to `display: grid;`. `grid-template-columns: 1fr 3fr;` defines two columns, where the first takes 1 fraction unit of space and the second takes 3 fraction units, making it three times wider. `gap` adds space between the columns.