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 20px 150px 20px 150px; grid-template-rows: auto 20px auto 20px auto;
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. As we’re defining our column widths and our gutter widths manually we have to make sure the total values equal 100%:
grid-template-columns: 30% 5% 30% 5% 30%;
Mind the Gap
There does exist a newer, more efficient way to declare gutter measurements, and that’s with a purpose-made property. We can use
grid-row-gap, or the shorthand
grid-gap property instead.
Using this means we no longer need to include grid tracks to accommodate our gutters, we only need to declare the columns and rows, so in our case that means three of each:
grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: auto auto auto;
Hmm, that’s a bit messy, but it sort of does the job. The difference you’ll notice is that the column widths now add up to 100%; our gutters will actually be subtracted from them automatically.
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. Now we just need to state how big we want our gutters:
grid-template-columns: repeat(3, 33.33%); grid-gap: 20px;
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.
Something is amiss: we still have a load of
grid-row declarations on our grid items, but they’re all wrong because we no longer have as many grid tracks. Happily, because we’re using
grid-gap to define our gutters, we can leave positioning of the items to automatic placement–items will no longer fall into the gutters. For now, remove all the positioning:
The fr Unit
One final improvement can be made to our simple grid; 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, 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.
- We needn’t declare gutters within our
grid-template, we can use the
grid-gapmeans we are less bound to positioning our grid items–we can hand more responsibility over to auto-placement.
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.