Rather than set a max-width
on his main content grid, Ethan has used what he calls a constraint column. Basically, the right-most column on his grid scales with the viewport and restricts the rest of his grid columns from ever exceeding 72rem
. Neat.
Rather than simply defaulting to max-width
as a constraint, I can use the empty space around my design, and treat it as a layout tool.
Here's how that can look (Ethan also has examples for centre-aligned content and some other small details):
.layout { display: grid; grid-template-columns: repeat( 8, 1fr ) calc( 100vw - 72rem ); }