Constrained CSS grids without max-width | Ethan Marcotte

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 );
}