cssgridgenerator
Page shells

CSS Grid Full Bleed Layout Generator

A measured reading column that lets images and heroes break out to the full window width.

Open in
1080px

Drag across the grid to draw an area. Arrow keys nudge, Shift + arrows resize.

space to pan · ⌘scroll to zoom
11fr2minmax(0, 120px)3min(680px, 100%)4minmax(0, 120px)51fr6
1auto2auto3auto4
hero1 / 1 / 2 / 6
content2 / 3 / 3 / 4
wide3 / 2 / 4 / 5

Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.

.bleed {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 20px;
  grid-template-areas:
    "hero"
    "content"
    "wide";
}

.bleed > .hero { grid-area: hero; }
.bleed > .content { grid-area: content; }
.bleed > .wide { grid-area: wide; }

@media (min-width: 900px) {
  .bleed {
    grid-template-columns: 1fr minmax(0, 120px) min(680px, 100%) minmax(0, 120px) 1fr;
    gap: 28px;
    grid-template-areas:
      "hero hero hero    hero hero"
      ".    .    content .    ."
      ".    wide wide    wide .";
  }
}

How this layout works

This is the breakout grid: instead of a fixed-width wrapper with negative margins on the things that must escape it, the page itself is a grid of named tracks and each child picks how far out it reaches.

The outer 1fr tracks are the gutters. An element placed in the middle track is article width, one placed across the wider span is a pull-out, and one placed from the first line to the last is edge to edge — no margin-left: calc(50% - 50vw), and no horizontal scrollbar from 100vw including the scrollbar itself.

On mobile the whole thing collapses to a single track, so every element is full width and the gutters come from padding instead. That is the correct small-screen answer: there is no room to break out of.

Every property used here is listed in the CSS Grid cheat sheet, with the reason to reach for it.

Frequently asked questions

How do I make an image break out of a centred content column?
Make the page itself the grid: gutter tracks on the outside, a capped content track in the middle. An element placed across all the tracks is edge to edge, one in the middle track is article width. No negative margins, and no 100vw overflow from the scrollbar.
Why does width: 100vw cause a horizontal scrollbar?
Because 100vw includes the width of the vertical scrollbar, while the page content box does not. The breakout grid avoids the problem entirely — the full-width track is as wide as the container, scrollbar excluded.
How do I center a grid in CSS?
Use justify-content: center on the grid container to centre the whole grid inside it, and margin-inline: auto with a max-width to centre the container in the page. These are different jobs: the first moves the tracks within the container, the second moves the container itself.
How do I center items inside a CSS grid?
Set place-items: center on the container. That is shorthand for align-items plus justify-items, and it centres every item inside its own cell on both axes. For a single item, use place-self: center on that item instead.
How do I make a CSS grid responsive?
Use grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) and it reflows at every width with no media queries at all. Add breakpoints only when the exact column count matters, or when the layout has to change shape rather than just wrap.
When should I use CSS Grid instead of Flexbox?
Use Grid when things must line up in two directions at once, and Flexbox when content flows along one axis. A page skeleton or dashboard is Grid; a navbar or row of buttons is Flexbox. They nest: Grid for the page, Flexbox inside the cells.

How to use it

  1. Open the pattern

    The full bleed layout loads into the editor already responsive, with every breakpoint set up.

  2. Change the tracks

    Edit the column and row sizes in the Tracks panel. Anything valid in a track list works.

  3. Redraw at another width

    Move the ruler past a breakpoint marker and rearrange. Only the placement changes.

  4. Copy the code

    Take CSS, HTML, Tailwind or a shadcn component. The media queries are already written.

More in Page shells

Elsewhere in the library

Browse all 46 layout patterns →

Related tools

Every generator here writes CSS you can paste straight into a project.