1 Thing A Week 1 Thing
A Week

I think I finally understand the CSS min() and max() functions!

Week 210.0 — 1st November '21

I was thinking about a few projects this week that I'd like to make some progress on and it finally hit me. I wasn't even thinking about a specific problem that needed solving, only that I'd like to come up with a layout that would make use of the min() and max() functions.

I've written about both min() and max() in an effort to better understand them but both felt like they were a little bit of a mystery to me.

As I've said previously, the names actually sounded counterintuitive to me because of how they work. To me, max() felt like it described something that can grow but it actually a restrictor and the opposite is true of min.

So now that I've that lightbulb moment, I wanted to put it down in writing so I never forget.

min()

min() is the minimum size something should be:

min(ideal, atLeast)

The first argument defines the size you actually want it to be when there's enough space available. The second argument describes how small something can get. The minimum. No smaller. At least this size.

I've labelled the second argument atLeast because this is how I've been thinking about it this week. The item should be at least this size but ideally it will be the size specified.

max()

max() is the maximum size something should be:

max(ideal, atMost)

The first argument defines the size you actually want it to be when there's not enough space available. The second argument describes how big something should get. The maximum. No bigger. At most this size.

Again, the second argument is labelled atMost because at most the item should be this size, but ideally it will be the size specified.

I'm really pleased I have these concepts set in my mind now. It will make using them so much easier in the future... I just need to remember the order of the arguments and still need to get a better handle on both clamp() and minmax()!

More from 1 Thing A Week
« 3 more things apple should bring back to the Mac Applying silicone correctly to your bathroom Where exactly does the new 10th-generation iPad fit into Apple's iPad lineup? 1,000 sites now featured on Sitejoy »

Advertisement

Notable

Nothing notable this week 😞

Jump to notable items for Week #209, Week #211 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit