Intrinsically Responsive CSS Grid with minmax() and min()
evanminto.com →

Evan Minto:

min() accepts one or more values and returns the smallest value. The magic of the function is that, just like calc(), the arguments can use different units, which allows us to return values that change dynamically based on context.

min() is one of three new comparison functions introduced as part of the CSS Values and Units Module Level 4. There’s also max(), which naturally does the inverse of min(). Finally clamp() is a convenience function that applies both a minimum and a maximum to a single value.

This is brilliant and I can’t wait until I can change my @supports queries from display: grid to min().