In this tutorial we’re going to take the grid from our previous tutorial and use it as a playground to look further into Grid. We’ll improve the way we define our gutters, explore flexible layouts, the fr unit, and introduce the
The whole point of Grid is to enable us to properly control layout on the web, so let’s make our static grid fluid before we go any further. If you recall, we were defining our grid with static pixel measurements:
grid-template-columns: 150px 150px 150px; grid-template-rows: auto auto auto; grid-gap: 20px;
It’s quite possible to use other units here too, such as ems, or rems for example. Or even more unusual units like vh and vmin.
In this case we’re going to change our pixel units for percentages.
grid-template-columns: 33.33% 33.33% 33.33%;
Hmm, that’s a bit messy, but it sort of does the job. You’ll notice that the column widths now add up to 100%; our gutters will be subtracted from them automatically.
grid-gap will accept fixed or flexible units, which means we can perfectly combine fluid columns and fixed gutters without any complex calculations on our part.
Let’s write this is a neater way, using the
grid-template-columns: repeat(3, 33.33%);
This states “repeat 33.33% three times” giving us three columns. And we don’t even need the
grid-template-rows declaration because the
auto value is assigned as default anyway.
Note: when columns are defined using % values, they’ll use exactly those values and add any
grid-gap on top. You’ll notice the grid above has been pushed to the right because it’s now 99.99% wide plus the grid-gaps.
The fr Unit
One final improvement can be made to our simple grid, and it will solve the width problem we just mentioned; we’re going to introduce the fr, or fraction unit. A single fr unit describes “one piece of however many pieces we’re splitting this into”. For example, we could declare our columns using:
grid-template-columns: 1fr 1fr 1fr;
Here there’s a total of three fr units, so each column would be one third wide. Here’s another example:
grid-template-columns: 2fr 1fr 1fr
Now there’s a total of four fr units, so the first column would take up half the available width, with the other two columns each taking a quarter.
These units are really powerful, especially in combination with other units of measurement:
grid-template-columns: 300px 1fr 3fr 20%;
Here we’ve declared four columns:
- the first is fixed at 300px wide
- the last is a flexible 20% of the grid container element wide
- then the fr units are calculated, also taking gutters into account, leaving the second column with one piece of the remaining space
- and the third with three pieces.
It looks like this, perfectly highlighting auto-placement as our nine items shift to fill the gaps:
But back to our original grid. Let’s replace the clumsy and inaccurate 33.33% value with 1fr:
grid-template-columns: repeat(3, 1fr);
So, to recap:
- Grid will accept flexible units in combination with fixed units of measurements.
repeat()function will save us time and keep our stylesheets maintainable.
- The fr, or fraction unit is a very powerful way of describing grid templates.
We’ve come a long way in just two tutorials, but you’re now the proud owner of a very neat and concise grid! In the next tutorial we’ll explore grid areas, taking a look at the
span keyword and some practical layouts.