Cyber Monday Sale! 50% off themes, plugins, graphics, audio + video! Cyber Monday Sale! Download Now
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

CSS Grid Layout: Fluid Columns and Better Gutters

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: A Quick Start Guide
CSS Grid Layout: Using Grid Areas

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 repeat() function.

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:

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. 

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.

Repeat

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

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:

Here there’s a total of three fr units, so each column would be one third wide. Here’s another example:

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:

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: 

Finished pen:

Conclusion

So, to recap:

  1. Grid will accept flexible units in combination with fixed units of measurements.
  2. The repeat() function will save us time and keep our stylesheets maintainable.
  3. 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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.