CSS Grid Layout: Fluid Columns and Better Gutters

CSS Grid Layout: Fluid Columns and Better Gutters

In this tutorial we’re going to take the grid from our previous tutorial and use it as a playground to explore different units of measurement and Grid’s properties. 

Flexible Units

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-column-gap and 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. 

Repeat

Let’s write this is a neater way, using the repeat() function:

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.

Resetting Our grid-column and grid-row Values

Something is amiss: we still have a load of grid-column and 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);

Finished pen:

Conclusion

So, to recap:

1. Grid will accept flexible units in combination with fixed units of measurements.
2. We needn’t declare gutters within our grid-template, we can use the grid-gap properties instead.
3. grid-gap means we are less bound to positioning our grid items–we can hand more responsibility over to auto-placement.
4. The repeat() function will save us time and keep our stylesheets maintainable.
5. 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.

Useful Resources

• The <fraction> type and fr unit on W3C
• Again, follow @rachelandrew