Here’s Andy Bell recommending using CSS
clamp() to control your wrapper/container
width because it supports setting a preferred value in
vw to ensure sensible gutters combined with a maximum tolerance in
rem—all in a single line of code.
If we use clamp() to use a viewport unit as the ideal and use what we would previously use as the max-width as the clamp’s maximum value, we get a much more flexible setup.
The code looks like this:
This is pretty cool because I know from experience that coding responsive solutions for wrappers can be tricky and you can end up with a complex arrangement of max-width and media queries whilst still—as Andy highlights—not providing optimal readability for medium-sized viewports.
Using CSS Grid with minmax() is one possible approach to controlling wrappers however this article offers another (potentially better) tool for your kit.
It’s worth noting that Andy could probably have just used
width: min(90vw, 70rem) here (as Christopher suggested) because setting the lower bound provided by
clamp() is only necessary if your element is likely to shrink unexpectedly and a regular block-level element wouldn’t do that. The
clamp approach might be handy for flex items, though.