Fractional.

In fairly short order, the fr unit has become one of my favorite parts of the CSS Grid specification. If you’re not familiar, Robin Rendle wrote an excellent introduction last year; unsurprisingly, Rachel Andrew has been talking about it for ages. In short, fr is a near-magical value that lets us quickly address the remaining space in a grid area.

A quick example! I have one! Let’s say I wanted to create a layout that has a fixed-width column on the left, and a flexible column that expands off to the right. Well, that’s a matter of writing something like this:

.region {
    display: grid;
    grid-template-columns: 175px 1fr;
}

If we were to translate grid-template-columns: 175px 1fr to English, we’ve created a 175px-wide column on the left of our region element, followed by a column that’s as wide as the remaining space.

Neat, right? Here’s another example from Robin: we can use fr to quickly create a set of 12 flexible columns right next to a fixed-width element, like so:

.region {
    display: grid;
    grid-template-columns: 250px repeat( 12, 1fr );
}

Here, we’ve created a 250px-wide column, followed by 12 other colums that perfectly divide the available space that remains.

Heck, I’m using fr on this little website. If you opened up Firefox’s Layout inspector, you’d see grid lines that look something like this:

That layout’s powered by this bit of CSS:

.page-content {
    display: grid;
    grid-template-columns:
        1fr
        repeat( 12, minmax( 1em, 5.208333333rem ) )
        1fr;
    grid-column-gap: 0.75%;
}

This sorely needs a refactor (like most of my site) but: I’ve created a twelve-column region in the center of my design, which is where most of the content is laid out. But that region is bracketed by two 1fr-wide columns on each side, which would — in theory! I’m not currently using it! — allow me to have full-bleed layouts, like so:

Each of these layouts are all achievable with no muss, no fuss, and with no complex math — all thanks to fr.

But hey, just to be clear, you can still do complicated layout calculations! (And sometimes, you’ll have to.) For one recent example, I’d recommend Dan Webb’s walkthrough of how he created a complex, irregular responsive layout in CSS Grid. In it, he offers a clear, detailed breakdown of how he produced Jennie Lewis’ complex layout, and the decisions he made along the way. It’s great stuff.

There’s been a bit of discussion recently about using CSS Grid for responsive layouts, with some folks opining fairly authoritatively about How CSS Grid Is Changing Responsive Design. And the thing I’ve admired most about this discussion is how little consensus there is among those takes — how varied everyone’s perspectives are. In other words, CSS Grid is changing everyone’s responsive practices in subtly different ways.

 — so! How’s CSS Grid changing responsive design for me, you might ask?

(…I realize you probably didn’t ask this. Sorry.)

Well, I’m speaking just for myself here, but I can say the underlying ingredients for a responsive layout haven’t changed much for me: I’m still creating flexible, grid-based layouts, dropping in flexible images and media, and then adapting those flexible layouts with media queries. But! How I create each of those three things is different than it was a few months ago, much less a few years ago. And I’m sure the more I learn about Grid, the more my practice might change over time.

Right now, one of the biggest changes I’ve noticed recently is fr-driven: I’m doing considerably less complex math than I would in a float- or flex-heavy layout. That’s not to say none, mind you. But at the moment, I’m using the trusty ol’ target ÷ context = result formula much, much less than I used to. If I find myself doing some contextual layout math, I’ll ask myself if there’s a simpler way. And more often than not, thanks to fr, I’ll find the answer is yes.