CSS
CSS Grid Full-Bleed Sections in a Constrained Layout
Implement full-bleed sections in a CSS Grid layout, allowing specific elements to break out of the main content area and span the full viewport width.
.grid-container {
display: grid;
grid-template-columns:
[full-start] minmax(1em, 1fr)
[main-start] minmax(0, 800px) [main-end]
minmax(1em, 1fr) [full-end];
/* Defines grid columns: full-width | main content | full-width */
/* minmax(1em, 1fr) creates flexible gutters */
gap: 20px;
margin: 0 auto; /* Center the overall container if needed */
}
.main-content-item {
grid-column: main-start / main-end;
background-color: #f5f5f5;
padding: 20px;
}
.full-bleed-section {
grid-column: full-start / full-end;
background-color: #e0e0e0;
padding: 30px 1em; /* Use padding for inner spacing in full-bleed */
margin-bottom: 20px;
text-align: center;
}
How it works: This snippet shows how to create full-bleed sections within a main constrained content area using CSS Grid. `grid-template-columns` defines named grid lines (`full-start`, `main-start`, `main-end`, `full-end`) and sets up flexible gutters (`minmax(1em, 1fr)`) surrounding a fixed-width `main` column. Elements assigned `grid-column: main-start / main-end` will stay within the main content width, while those set to `grid-column: full-start / full-end` will expand to the full viewport width, effectively 'bleeding' out of the main content flow.