The Shiny New Grid Tools
I feel like a schoolboy again!
Besides being completely awesome for full page and responsive layouts, CSS Grid comes packed with some incredible new tools that make a web dev feel like a freaking rockstar. Check out these new weapons at your disposal as soon as you start using Grids:
Grid gaps are like margins on steroids. You can set gaps between your rows and columns, and the gaps are wicked smart: they only apply to the inner tracks! Our outer tracks stay flush against the edges like we want them to 99% of the time.
We used to have to get this by disabling margins on the first or last child element. But then we also had to worry about what happened when the content shifted to multiple lines making the last child no longer the one that needed its margin removed. It was a pain train, and Grid
gaps now handles it for us automatically. It’s almost as if someone who built this stuff actually uses CSS themselves!
Named Grid Lines
Grids gives us a brand new way to size and position everything that goes into the grid. Check out Naming your CSS Grid Lines for all the juicy details.
Grids come with a brand new
fr unit that can only be used in a grid. They’re very different from percentages and viewport units (
vh) etc. When you assign a column or row a fraction unit, it simply means take up a certain fraction of the free space left over after all of the other tracks and gaps take their fixed space. Check it out. In this example we’re telling the first (orange) column to be
50px wide, our grid to have
10px gaps between tracks, letting the second (blue) column take up 1 fraction of the remaining space, and the last (purple) column take up 2 fractions of the remaining space.
If you’re curious, the math looks like this:
gridWidth = 300px
totalGaps = gridGap (10px) * 2 = 20px;
column1Width = 50px;
freeSpace = gridWidth - totalGaps - column1Width = 230px
numFRUnits = 3 (the sum of all the fr units used in the grid columns)
column2Width = freeSpace * ( 1(fr) / numFRUnits) —> 230 * (1 / 3) = 76.66px
column3Width = freeSpace * ( 2(fr) / numFRUnits) —> 230 * (2 / 3) = 153.33px
fr units are legit. They place nicely with all the other units. And unlike percentages which are based on the size of the Grid container, fractions are based only on the free space that’s left. So you won’t accidentally cause overflow/scroll issues like you might if you used percentages.
NOTE: It’s easy to think
fr units are just like flexbox’s
flex-grow, but there’s a big difference. We’ll cover that in a future post.
One of my favorite new things that comes with Grids is the
minmax value. It lets you set ranges of values for your Grid columns & rows. See grid is perfect for responsive layout for an example of
minmax. This is such a smart unit, I’m really hoping to see it come to more parts of CSS in the future. Imagine being able to set a range for your padding: at least 10px but no more than 10%. We can kinda do this on a few properties today using
max-width but not on things like
box-shadow etc. and it’s just not as flexible as
Something way cool about Grids is that you don’t need to explicitly spell out a new column or row for each item that will go into your grid. You just define the template using
grid-template-columns. As soon as your grid has more stuff in it than what you defined, the smart little devil will go ahead and create new columns & rows beyond what you specified! Watch this: we only define two columns and one row (two cells total). But as soon as a third item went into the grid it created a new second row automatically:
The reason our purple item is so small is because these implicit (auto-generated) tracks default to a size of
auto. Since the purple item doesn’t have any content, it’s only size are its borders. But the smart Grid spec people totally threw us a bone here: we can actually specify exactly how we want any auto-generated implicit tracks to behave! Here’s the exact same example but this time telling our Grid to make any new rows take up an equal share of the available space, using
Sweet right? Our new implicit row forced our original first row to stop hogging all the space. What do you think would happen if we had set
grid-auto-rows to a fixed unit, like
50px? Play with this example (it’s live on the site or you can go to codepen) and see what happens. I love the control Grid layout gives us over this.
True Column Flow
I once bombed an interview question many years ago where I had to create a “column layout”: to make items fill up entire columns first rather than rows first. But the DOM doesn’t work this way: it always fills up rows first:
This made it fill up the column first rather than the row first, and any new items that get added will make the grid create new implicit columns instead of implicit rows. See! It wasn’t that I was a complete n00b of a dev, I must have just known in my heart that someday CSS would get awesome enough to do this kind of thing for me ;)
Grid layout brings so many great new tools to our kit! In a future post I’ll cover how awesome
grid areas are,
justify-self (you know, that thing you tried a million times with flexbox but it simply doesn’t have it), and other amazing goodies. Students of Grid Critters are gonna master all of it in the most fun way possible, you should join us. Have fun playing with all these shiny new Grid tools!