Unfortunately, this won’t be possible with such configuration and CSS grid in general. You will need to try something else using Flexbox.
Actually I don’t see how to combine the responsiveness trick with centering.

You can avoid such issue by using values like 450.05px or 450.99px. A value that the browser cannot use it (or it’s rare to be used) as width

In this codepen, they aren’t centered. https://codepen.io/t_afif/pen/bGqbgYY

It seems this can be avoided by using a value that can never be equal to the the viewport width. That is, use a non-whole number like --w: 450.1px;. Alternately, add a tiny percentage, like --c: (100vw - var(--w) + .1%); that might be preferable so the “breakpoint” value remains a nice, round number.

I have to agree with Kev on this one. I wouldn’t use this, since media query/container query are intended for this behavior, where clamp is not.

Nevertheless I enjoyed this article. It is a cool hack to tryout and good to know that it exists but not to use in production code.

I have to disagree here:
“with media query we have exact breakpoint pixel” –> I also have exact breakpoint pixel here the same way media query do. I am simulating the same behavior of media query with less of code.

“and any body can understand without reading the code.” –> you say this because you know media queries since too long and media queries are available since more than 10 years now. The fact that media queries are widely used make them “easy” but still no anyone can understand them at first glance. You have no idea the number of people that get confused between min-width/max-width or the syntax of media query or the order of media queries. let’s not talk about the specificity issues. You still need to read the DOC of media query to understand them, they are not intuitive.
My logic is “easier” than media query BUT it’s something new and anything new always seems hard because we are not used to it. We need to give it time and if people start to work with it will be “easy” because such code will be widely used and documented. Let’s not forget the fact that my logic rely on CSS variable so all you have to do is to update those variables. If they are well documented, you don’t even need to check the code. We cannot say the same for media queries

By following along, it was simple for me to see how I could do away with Bootstraps grid layout. In a world of trying to make code smaller this eliminates the need to import that one last piece with some small additions.

.container {
    @include push--auto;
    max-width: 80%;
    display: grid;
    gap: 20px;
    grid-template-columns:
    repeat(auto-fill,
        minmax(clamp(clamp(clamp(clamp(
            100%/(var(--xl) + 1) + 0.1%, (var(--b1) - 100vw)<em>1000,
            100%/(var(--l) + 1) + 0.1%),(var(--b2) - 100vw)</em>1000,
            100%/(var(--m) + 1) + 0.1%),(var(--b3) - 100vw)<em>1000,
            100%/(var(--s) + 1) + 0.1%),(var(--b4) - 100vw)</em>1000,
            100%), 1fr));

&--5 {
    --b1: 1200px;
    --xl: 5;
    --b2: 992px;
    --l: 4;
    --b3: 768px;
    --m: 3;
    --b4: 576px;
    --s: 2;
}

&--4 {
    --b1: 1200px;
    --xl: 4;
    --b2: 992px;
    --l: 4;
    --b3: 768px;
    --m: 3;
    --b4: 576px;
    --s: 2;
}

&--3 {
    --b1: 1200px;
    --xl: 3;
    --b2: 992px;
    --l: 3;
    --b3: 768px;
    --m: 3;
    --b4: 576px;
    --s: 2;
}

&--2 {
    --b1: 1200px;
    --xl: 2;
    --b2: 992px;
    --l: 2;
    --b3: 768px;
    --m: 2;
    --b4: 576px;
    --s: 2;
}
}

I completely agree with the “expressive, readable code” but in this case you could definitely make a SASS mixin out of it and make it nice for your fellow developers.

I strongly prefer this to media queries, though the formulas should always be well commented or the meaning might be lost. I don’t know if I trust most programmers to even bother with that.

To quote Private Frazer from Dad’s Army, “We’re doomed”

Container queries will come, We’ll all say “hallelulah”, Webkit will delay implementation long enough to prop up the App Store a bit longer, squirrels will manically update npm packages and dependencies, things will break and get fixed, polyfills will multiply and everyone will rally under the new code on the block.

In the meantime there’s your solution. I just can’t think of an appropriate atomic class name to avoid repetition.