Use CSS Clamp to create a more flexible wrapper utility

Categories

A handy way to use modern CSS functions to give yourself fine-grained, yet flexible, design control.


You can use clamp() to set three values: a minimum, an ideal and a maximum.

This is really handy in the context of a wrapper, because it’s a mostly fluid element, often limited with a max-width. 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.

An article where the content is very tight to each side of the viewport

Even though the line lengths are set to a sensible width in CSS, contextually, they still look very long in medium viewports.

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.

Code language
CSS
/**
 * WRAPPER
 * Sets a max width, adds a consistent gutter and horizontally
 * centers the contents
 */
.wrapper {
  width: 90vw;
  width: clamp(16rem, 90vw, 70rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: relative;
}

We can set two instances of width so browsers that don’t support clamp() can get a sensible default. Browsers that do support clamp() will override that first value. Good ol’ progressive CSS, right?

You could also use logical properties to set margin and padding. I choose not to in this context because we’re setting both horizontal values anyway.

Here’s how it looks after setting our new wrapper:

An article where the content has much more room horizontally

This is much better now and the content looks like it has much more breathing room, making it easier to read.

The app I’m using for this responsive design testing is called Sizzy and it’s absolutely fantastic. You should get it!

This is a very small tweak, but these design details are what makes the user-experience that little bit better. Check out this handy write-up by Una Kravets.


Comments

If you liked this post, you might like these ones, too

  1. Convert a 2D array into a flat, 1D array of unique items

    Convert a messy multidimensional array into a nice single dimension array of unique items.

    Continue
  2. Control changing numbers with font variant numeric

    Get the benefits of monospaced fonts with your favourite (supported) non-monospaced fonts.

    Continue
  3. Create a line break while maintaining inline status

    🔥 A handy quick tip.

    Continue

Become a supporter by joining the Piccalilli Membership

For $5 per month, you get access to a private, friendly Discord community, a regular newsletter, huge discounts on courses and free access to all premium tutorials.

Most importantly, by becoming a supporter, you help make as much content, free-to-everyone as possible on this site, which benefits everyone. As a member, you also get an ad-free experience around the site.

Support Piccalilli by becoming a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.