Use CSS Clamp to create a more flexible wrapper utility

A More Fluid Wrapper Without Media Queries

CSS clamp() offers a way to make container widths adapt more gracefully than a fixed max-width. The idea, shared by Andy Bell, is that a wrapper element with a simple maximum width can feel too wide at certain viewport sizes, particularly on tablets in portrait mode when reading long-form text.

.wrapper {
  width: clamp(16rem, 90vw, 70rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

This becomes a slight issue in mid-sized viewports, such as tablets in portrait mode, in long-form content, such as this article because contextually, the line-lengths feel very long.

Chris Coyier’s demonstration illustrates the gap: at a very large screen you hit the upper cap, and at small screens full width is fine, but between those extremes the layout rarely looks ideal.