CSS
Simple Two-Column Layout with CSS Grid
Implement a straightforward two-column web layout using CSS Grid, ideal for main content and sidebar structures, showcasing `grid-template-columns`.
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr; /* One column for sidebar, three for main content */
gap: 20px; /* Space between grid items */
min-height: 300px;
border: 1px solid #ccc;
}
.sidebar {
background-color: #f0f0f0;
padding: 15px;
}
.main-content {
background-color: #e0e0e0;
padding: 15px;
}
/* Basic HTML structure for context:
<div class="grid-container">
<div class="sidebar">Sidebar Content</div>
<div class="main-content">Main Content Area</div>
</div>
*/
How it works: This snippet demonstrates a basic two-column layout using CSS Grid. `display: grid` makes the element a grid container. `grid-template-columns: 1fr 3fr` defines two columns: the first takes 1 fraction of the available space (for the sidebar), and the second takes 3 fractions (for the main content). `gap` adds spacing between grid items, creating a clean separation.