Layout Breakouts with CSS Grid
A post about the layout you're looking at right now
The previous structure of this page layout was virtually the same, the foundation of it expertly defined in the article Full-Bleed Layout Using CSS Grid by Josh Comeau. It's a technique I've used on many projects. I've even blogged about it previously in Horizontal Scrolling in a Centered Max-Width Container.
What I'm documenting here is an extension of the full-bleed CSS Grid layout. In the last version of my site, selected elements – images, code blocks, quotes – were made wider than the page content area using negative margins. It worked well! For this next iteration, I explored applying these breakout offsets using CSS grid and named grid lines.
Layout setup
Below are the styles applied to the main content container, defining the grid display and its columns template:
.content {
--gap: clamp(1rem, 6vw, 3rem);
--full: minmax(var(--gap), 1fr);
--content: min(50ch, 100% - var(--gap) * 2);
--popout: minmax(0, 2rem);
--feature: minmax(0, 5rem);
display: grid;
grid-template-columns:
[full-start] var(--full)
[feature-start] var(--feature)
[popout-start] var(--popout)
[content-start] var(--content) [content-end]
var(--popout) [popout-end]
var(--feature) [feature-end]
var(--full) [full-end];
}In the grid-template-columns declaration, column areas are represented by keywords wrapped in square brackets suffixed with -start and -end. These keywords are set as grid-column values on elements residing in this container.
Starting at the edge for an example: [full-start] and [full-end] represent the full-bleed. Any child element containing grid-column: full; will span its parent's available horizontal space.
Each grid line is accompanied by a CSS variable of the same name, which supplies the inline size or width of the column. Outside of the center column block (the content area) that same variable is used after the -start and before the -end positions so their sizes match on either side. Continuing with the full keyword example, these values are [full-start] var(--full) and var(--full) [full-end].
I like to imagine each keyword's area blooms out from the center. popout grows out of content, feature from popout, then full blossoms all the way to the edge. The horizontal space each keyword covers is the sum of values between its -start and -end points.
As a way to visualize this grid, I've created a fresh CodePen demo below. Click the "show grid lines" checkbox and resize the browser window to get a sense of how the layout expands and collapses.
In the CSS tab of that demo, we can see how these grid areas are being applied. The first ruleset, .content > *, matches all direct children of the container, setting them to the center content area. Cascading rulesets then revise grid-column with their respective keyword values.
.content > * {
grid-column: content;
}
.popout {
grid-column: popout;
}
.feature {
grid-column: feature;
}
.full {
grid-column: full;
}Having fun with sizing functions
Much of the real magic here is through the use of minmax(). It permits the flexible structure of this layout, elements breaking free on larger viewports and collapsing back in when less space is available. Or, as MDN and the CSS Spec describe it:
The
minmax()CSS function defines a size range greater than or equal to min and less than or equal to max
Let's revisit the CSS variables declared at the top of the ruleset. I'll explain how this all works in harmony.
--gap: clamp(1rem, 6vw, 3rem);
--full: minmax(var(--gap), 1fr);
--content: min(50ch, 100% - var(--gap) * 2);
--popout: minmax(0, 2rem);
--feature: minmax(0, 5rem);--gaprepresents a gutter size for the left and right sides of the page. This value leans into theclamp()function for more fluid, flexible sizing.--fullstretches an element so that it spans the entire horizontal space. By setting--gapas the min value, it also takes on the role of visible page gutters for smaller screens.--contentacts as the main content area. Themin()function sets the max-width of this column. Once the available space falls below this value, it then switches to 100% while also subtracting the left and right gutter sizes.--popoutand--featureextend elements beyond the content area by2remand5remrespectively. As the available horizontal area tightens, these values collapse down to nothing, aligning elements with the main content space on smaller screens.
Losing floats
Alex Carpenter's tweet exposes a limitation in this layout pattern: we lose the ability to float elements. For example, we wouldn't be able to float an image to the left and wrap text around it. The full-bleed solution from the CSS-Tricks article Full Width Containers in Limited Width Parents is handy in this situation.
Breakout session
That wraps things up! The potential of this concept doesn't stop here. How might you extend or refactor? Drop me a note on Twitter with your awesome layout ideas. 🙌
This article was updated on October 12th, 2022 to include the "Losing Floats" section.