Full-bleed grid layout

Quick implementation

.full-bleed-layout {
  display: grid;
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
}

.full-bleed-layout > * {
  grid-column: 2;
}

.full-bleed-layout > .full-bleed {
  grid-column: 1 / -1;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a content layout.

Goal: A centered-content layout where specific elements can break out to full viewport width — no JavaScript.

Technical constraints:
- Use a 3-column grid: 1fr min(65ch, 100%) 1fr.
- Default all children to the center column with > * { grid-column: 2; }.
- Full-bleed elements use grid-column: 1 / -1 to span all tracks.
- Use oklch() for any color values, not hex or rgba().
- The center column must never exceed 65ch for readability.

Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept a fullBleed boolean prop on child wrappers.

Edge cases to handle:
- Horizontal scrollbar must not appear from full-bleed elements.
- Nested grids inside full-bleed sections should not inherit the parent grid.
- Content with images must respect the center column constraint.

Return HTML + CSS.

Why this matters in 2026

Blog posts, marketing pages, and documentation all share a need: most content lives in a readable centered column, but certain elements — hero images, code blocks, data tables — should stretch edge-to-edge. Before Grid, developers used negative margins or 100vw hacks that caused horizontal scrollbars. This three-column grid pattern solves the problem elegantly.

The logic

grid-template-columns: 1fr min(65ch, 100%) 1fr creates three tracks. The center track holds your content and maxes out at 65ch for optimal readability. The outer 1fr tracks absorb remaining space equally. All children default to the center track via grid-column: 2. A .full-bleed class overrides this with grid-column: 1 / -1, spanning from the first to the last grid line.

Accessibility & performance

This layout is pure CSS — no JavaScript overhead, no resize observers. The source order matches the visual order, which keeps screen reader navigation logical. For full-bleed images, add width: 100% to prevent horizontal overflow. The min() function ensures the layout works on all viewport sizes without media queries, making it inherently responsive.