Comments on: Use CSS Clamp to create a more flexible wrapper utility

By: Nicolas Hoizey

Nicolas Hoizey — Mon, 31 Jan 2022 17:52:53 +0000

I don't get it. How is it better than this?

width: 80vw;
max-width: 60rem;

At least, this version doesn't give an horizontal scroll on viewports thinner than 320px/16rem.

By: Ed Murphy

Ed Murphy — Wed, 29 Dec 2021 03:02:15 +0000

In reply to Arkay. nobody ever said floats worked fine. tables, maybe.

By: Christian Rau

Christian Rau — Tue, 23 Feb 2021 09:53:53 +0000

A great example -(s) in the comments as well!

Compared to the max-width example, It seems like there is an issue with text wrapping on small screen sizes.

How to avoid text being capped?

By: Geoff Graham

Geoff Graham — Fri, 19 Feb 2021 18:56:08 +0000

In reply to Will.

there isn’t a better alternative to bootstrap’s grid system.

I'd love for you to elaborate on that. At the same time, I think you're missing the BIG picture here. CSS is giving us new utilities that give us finer control of responsive design—to the extent that media queries are now just another tool in the shed. So, is clamp() better than max-width? I dunno. It depends on what it's for. In this case, it makes for a pretty darn good wrapper utility that allows us to force a range of values in a way that max-width cannot. And is it better than Bootstrap's grid system? Again, dunno. But equating them is a bad idea because clamp() isn't designed to be a system or a framework the same way that Bootstrap is.

By: Will

Will — Fri, 19 Feb 2021 18:21:58 +0000

I feel like every time I come here I end up learning just another way to do something that already works without any real benefit.

And let’s be honest, when we need responsive web design there isn’t a better alternative to bootstrap’s grid system.

By: Andreas Lagerkvist

Andreas Lagerkvist — Fri, 19 Feb 2021 15:24:45 +0000

In reply to Mike Mai. I do pretty much the same thing;

:root {
    --site-width-min: 85vw;
    --site-width-max: 1080px;
    --site-width: var(--site-width-min);
    --site-padding: calc((100vw - var(--site-width)) / 2);
}

@supports (padding: min(10%, 100px)) {
    :root {
        --site-width: min(var(--site-width-min), var(--site-width-max));
        --site-padding: calc((100vw - var(--site-width)) / 2);
    }
}

.section {
    padding: var(--spacing-x-large) var(--site-padding);
}

.container {
    width: var(--site-width);
    margin: var(--spacing-x-large) auto;
}

By: Arkay

Arkay — Fri, 19 Feb 2021 04:02:39 +0000

Not to be “that guy” either. But to dismiss new tools within CSS is how we get a bunch of tired dinosaurs complaining about flexbox when floats worked just fine.

By: Mike Mai

Mike Mai — Thu, 18 Feb 2021 02:52:28 +0000

I am not a fan of the traditional max-width wrapper. I prefer to do the math with just the padding, this way I get the benefits of using background color and background image as well.

:root {
  --page-padding-x: calc(
    (100vw - min(80vw, 75ch)) / 2
  );
}

.section {
  padding-right: var(--page-padding-x);
  padding-left: var(--page-padding-x);
}

https://codepen.io/mikemai2awesome/pen/YzpQzaP

By: Michael Cohen

Michael Cohen — Thu, 18 Feb 2021 01:12:09 +0000

Sorry to be "that guy", but how is this any different from setting min-width: 16rem; width: 90vw; max-width: 70rem;? That's what I've been doing for what seems like a decade, at least (sans the min-width, which just seems like a bad idea to have around flexible content).