Full-Width Elements By Using Edge-to-Edge Grid

Avatar of Chris Coyier
Chris Coyier on (Updated on )

If you have a limited-width container, say a centered column of text, “breaking out” of that to make a full-width element involves trickery. Perhaps the best trick is the one with left relative positioning and a negative left viewport-based margin. While it has its caveats (e.g. requiring hidden overflow on the body, the container needs to be centered, etc.), at least it’s easy to pull off and everything else in the container just happily goes about its business.

There have been quite a few posts about another way to do this, involving CSS grid:

The one thing that all these have in common is that they presuppose you have an edge-to-edge grid. I kept thinking to myself, “Do people really use CSS grid for their entire page layout?” Like, essentially body { display: grid; }ยน? The articles themselves tend to use a class name, but the assumption is that that parent is a full-browser-width container.

I asked around a little, and there was some murmurs of, “yes, I totally do that.” So, cool, it’s a thing people do. My first thought was that that seems like a pain in the butt for a few of reasons:

  1. A typical “header” and “footer” are full-width, so having to explicitly place them on the grid and stretch them over the correct number of columns and keep that up to date as you fiddle with the columns seems like a lot of work compared to having the header just be a block-level <header> sitting at the top (or bottom) of the site. You can still have an edge-to-edge grid in the middle, and have block-level elements above and below.
  2. Having to explicitly place all the items in an “article” into a middle column (e.g. article > * { grid-columns: 2 / 3; } just so you can occasionally “stretch” something by spanning more columns just feels weird to me. Like, if 95% of content lives in a centered column, something feels both more robust and relaxed about just putting that content into a parent element that handles the layout, rather than having each individual element needing to place itself onto the grid and the end result is that it appears as if it’s all in a shared parent.

I’m not hating on the technique necessarily, just noting that it makes me feel weird somehow. But I’m probably just old.

  1. I’d advise never using display: grid; directly on the body element. One common problem: browser extensions might place things into the DOM within the body, which would then be placed onto your grid and could screw up your layout. Seen it happen. I’d say it’s just like the React best practice not to bind the whole body, but to use a div child that is effectively the same thing anyway, just scoped to a selector.