CSS
Full-Width Section with Max-Width Content in CSS Grid
Design full-width page sections that contain content constrained to a maximum width, using an efficient CSS Grid layout technique with flexible columns.
.full-width-section {
display: grid;
/* Define three columns: 1fr (left padding), max-width content, 1fr (right padding) */
grid-template-columns: 1fr min(1200px, 90%) 1fr;
gap: 20px; /* Gap between columns */
background-color: #f0f8ff;
}
.full-width-section > * {
grid-column: 2; /* All direct children go into the middle (content) column */
/* Example styling */
padding: 20px;
background-color: #e6f7ff;
border: 1px solid #b3d9ff;
}
/* For a specific element that needs to span full width within the section */
.full-width-section .full-bleed-element {
grid-column: 1 / -1; /* Spans from the first to the last grid line */
background-color: #ffead9;
text-align: center;
}
How it works: This snippet provides a robust way to create full-width sections where the main content is constrained to a `max-width` (e.g., `1200px`), centered horizontally. It uses CSS Grid with three columns: `1fr` for flexible left padding, `min(1200px, 90%)` for the content area (ensuring it never exceeds `1200px` but is at least `90%` of container width), and another `1fr` for right padding. By default, all direct children are placed in the middle column (`grid-column: 2`), but specific elements can 'bleed' to full width using `grid-column: 1 / -1`.