📝 CSS-Tricks 276: Future-Friendly Layouts and Design System Vitals

View this newsletter on the web.

[Robin]: I have a terrible confession to make: I still think in media queries. When I’m working on a design that requires changing the layout, I always turn to media queries to help me out. This isn’t a problem, and it works and all. These days, though, we should probably be thinking a bit differently, like this…

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); grid-gap: 1rem; }

As I was working on a project this week I remembered this example above from Andy Bell’s Pen which you can see in action here:

See, with that one line of CSS with grid-template-columns, you can effectively create an infinite column grid:

grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));

It’s a bit scary if you’re used to writing media queries! So, let’s break it down some more:

grid-template-columns: repeat(...)

When we use grid-template-columns we can write something like grid-template-columns: 1fr 1fr 1fr 1fr; which will set 4 columns to be the same size. To make things easier for ourselves we can write repeat(4, 1fr) and it’ll do the same thing.

But! This is a problem because on smaller screens: we might want to have two columns, then four columns, then eight columns — and so on — as the browser viewport increases; we want the number of columns to change depending on how much space there is.

We can use the minmax() function to help us out here…

grid-template-columns: repeat(4, minmax(250px, 1fr));

This sets the minimum size of each grid column to 250px with a maximum of 1fr. The problem is that we’ll always have four columns though! Like we just said, what we want is 2, 4, 6, 8, etc., depending on how much space there is in the grid.

That’s where the auto-fill keyword comes in. Sara Soueidan wrote a great piece about this a while back and gives an example like this:

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

This why, we’re not setting a specific number of columns, but as many that can fit in the space available. Great! In this blogger’s opinion, auto-fill is magic and it’s what unlocks CSS Grid superpowers. (Though do check out Sara’s post, because it clearly explains the differences between auto-fill and auto-fit.)

Now, this sure looks like an awful lot of new stuff to learn just to avoid writing media queries, but I’d say that this newer way of thinking about responsiveness is much more…web-y. You’re no longer thinking about mobile, tablet, and desktop devices; instead you’re thinking about how much space the content can fill up and just let the browser do the layout work for you. Content-first design! Heck yeah.

[Chris]: There is one little extra thing I think you should pretty much always do in these style of grids, and I’ll let you read about it at the end of the chapter on flexible grids in the book.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s