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. CSS Frameworks, hype and dogmatism

    Some notes on the dogmatism and gatekeeping themes of Tech Twitter and how they can generate often incorrect and naive statements—specifically about frameworks and methodologies.

    Continue
  2. Easy horizontal and vertical centering in CSS

    🔥 A handy quick tip.

    Continue
  3. Aligning description lists with CSS Grid

    🔥 A handy quick tip.

    Continue

Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become 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.