Full bleed

The word is borrowed from print, where an image that bleeds runs past the trim line so that after the page is cut there is ink all the way to the paper’s edge. On the web there is no trim, so the term keeps only the effect: one element reaching both edges of the viewport while the text around it stays inside a comfortable measure. It is the layout equivalent of raising your voice for one sentence.

The awkward part is that the element has to escape a container it lives inside. The old trick was a negative margin paired with matching padding, or the margin-left: calc(50% - 50vw) pair, both of which work and both of which misbehave the moment a scrollbar exists, because vw counts the scrollbar and the content box does not. The grid answer inverts the problem: instead of the child escaping, the parent stops constraining. A three track grid with a measure sized middle column and two flexible gutters lets ordinary children sit in the middle track, and the one element that should bleed asks for the outer lines instead (grid-column: full). Nothing escapes anything, and nothing needs to know how wide its own gutter is.

WordPress named the same idea in its editor, where a block can be set to full alignment and gets the alignfull class, which is why the term arrives in a lot of briefs as “make this full width”. Worth keeping the two apart: full width means as wide as whatever contains it, and full bleed means wider than that, out to the edge of the page.

One caveat that is usually learned the hard way. A bleeding element inherits none of the reading protections the measure was giving, so text placed directly in one becomes a 120 character line, and a bleeding image with a caption needs the caption pulled back into the content column rather than left stranded under the far edge.