Full-Bleed Breakout

Outer gutters plus inner content tracks let one item spill past the reading column.

Four-track breakout

Constrained copy

Text stays in an inner content track. On wide viewports the outer 1fr gutters appear; the image reaches into one of them.

Silver sports car on a coastal road

Tracks: gutter · content · content · gutter. Copy occupies column 2; media uses grid-area to span columns 3–4 into the right gutter (rule 36).

Read the rule

A full-bleed band is edge-to-edge background. A full-bleed breakout keeps a reading column while one element deliberately exits it through shared grid lines.

Read the CSS Grid gauge

Important HTML

Copy and media are siblings in one grid container.

<div class="breakout-demo">
  <div class="breakout-copy">…</div>
  <div class="breakout-media">…</div>
</div>

Important CSS

Outer minmax gutters + grid-area spill.

.breakout-demo {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 18rem)
    minmax(0, 18rem)
    minmax(0, 1fr);
  gap: 1rem;
}

.breakout-copy { grid-area: 1 / 2 / 2 / 3; }
.breakout-media { grid-area: 1 / 3 / 2 / 5; }