Full-Width Elements By Using Edge-to-Edge Grid
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 it’s 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:
- Tyler’s “Breaking Out with CSS Grid Layout” which Rachel replied to in a post of her own.
- Rachel covered these full-width elements in another post, “Editorial Design Patterns With CSS Grid And Named Columns”
- Selen Gora’s “Setting the box in container to full width with CSS Grid”
- Bryan Robinson’s “Use CSS Subgrid to layout full-width content stripes in an article template”
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:
- 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
- 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.
-
I’d advise never using
display: grid;directly on thebodyelement. 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.
The post Full-Width Elements By Using Edge-to-Edge Grid appeared first on CSS-Tricks.
