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

Explore Other Notes

⬅ Newer

The semiotics of face masks

Whether or not you choose to wear a mask, drive a Prius or even a pickup truck, it’s worth remembering that because we’re human, we start with two things: What’s the story I’m […]

Older âž¡

Monarch

I really love the colour palette that Trent has created for his recent album release. It's a lovely blend of warm tones and underlying texture that just feels inviting. Also, the album itself is […]
  • Rather than set a max-width on his main content grid, Ethan has used what he calls a <em>constraint column</em>. Basically, the right-most column on his grid scales with the viewport and restricts [&#8230;]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.