CSS Grid Layout: Solving the Gutter Problem

In my recent conference presentations on the emerging CSS Grid Layout specification I’ve pointed out some of the issues I’ve encountered when learning to use this specification.

When explaining the spec, one issue that is consistently raised is the lack of “gutters”. If you want spacing between grid tracks, you have to create a gutter track as demonstrated in this example.

.wrapper {
  display: grid;
  grid-template-columns: 100px 10px 100px 10px 100px;
  grid-template-rows: auto 10px auto;
}

The 10px tracks are acting as row and column gutters, however as far as grid is concerned these are tracks just as any other track, so we have to work around them. To place an item in the second content track of the grid we have to position it starting on grid column line 3. That’s the line after the gutter that starts on line 2.

.b { 
  grid-column: 3 / 4; 
  grid-row: 1 / 2;
}

View the example (needs Chrome with Experimental Web Platform Features flag on)

This issue can be seen clearly in more complex grid systems. Take my 12 column ‘skeleton’ grid as an example. In the repeat syntax I need to set up a grid with column tracks and gutter tracks.

.wrapper {
  display: grid;
  grid-template-columns: repeat(11, [col] 4fr [gutter] 3.5fr ) [col] 4fr [gutter];
  grid-template-rows: auto repeat(4, [row] auto [gutter] 15px);
}

We then position elements on the grid using those col and gutter tracks.

.mainheader {
  grid-column: col / span gutter 12;
  grid-row: row /span gutter;
}

.mainfooter {
  grid-column: col / span gutter 12;
  grid-row: row 3 /span gutter;
}

.content {
  grid-column: col 5 / span gutter 8;
  grid-row: row 2 / span gutter;
}

.panel {
  grid-column: col / span gutter 4;
  grid-row: row 2 / span gutter ;
}

Even more troublesome is the fact that if you want to get grid to place items using the auto-placement algorithm (as shown in this example) you can’t have defined gutter tracks because grid will try and place items into them as it has no way to know which tracks you meant for gutters and which for content.

In my example I’ve used margins and padding to create spacing between items on the grid. This seems something of a fudge in an otherwise elegant specification.

When I initially raised this on www-style it was accepted that gutters were useful, however it was initially pushed to Level 2 of the spec. This made me sad, as I believed the lack of gutters made the spec more complex to get into. Everything I’ve been doing around Grid has been to try and encourage people to get into the spec, to start playing with it.

However, after having the chance to chat to specification author Fantasai at CSS Day, I put my case again and she has written row-gap and column-gap into the Level 1 Editor’s Draft. These properties function in much the same way as column-gap in multiple-column layout.

What does this mean in practice?

Let’s have a look at some of my examples. My simple example can now be written as:

.wrapper {
display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: auto;
  column-gap: 10px;
  row-gap: 10px;
}

Our complex grid system can now lose the gutter tracks, and as column and row gap falls in-between columns and rows and doesn’t add a trailing column or row I don’t need to tidy up the pattern.

.wrapper {
  display: grid;
  column-gap: 1em;
  row-gap: 1em;
  grid-template-columns: repeat(12, [col] 4fr );
  grid-template-rows: auto;
}

Placing items on this grid becomes again more simple.

.mainheader {
  grid-column: col / span 12;
  grid-row: 1;
}

.mainfooter {
  grid-column: col / span 12;
  grid-row: 3;
}

.content {
  grid-column: col 5 / span 8;
  grid-row: 2;
}

.panel {
  grid-column: col / span  4;
  grid-row: 2;
}

With auto-placement we can now avoid using margins and instead use the row-gap and column-gap properties controlling the spacing easily – even adjusting the spacing for different breakpoints.

These properties were only added to the specification this week, so aren’t in the implementation in Chrome yet.

Take interest in emerging specifications – it matters!

I’m really pleased to see these properties being added to the specification, even if it does mean I need to rewrite chunks of my presentation again! In addition to this simplifying the spec for designers and developers it also demonstrates something I keep telling people when I present on the subject. The specification authors, and the CSS WG, are interested in the thoughts of people who use the specifications to build websites. The time to get your thoughts heard is while a specification is in development. If you point out issues once a specification is out of Working Draft then your feedback is too late for that level. CSS Grid Level 1 will hopefully be complete this summer, and there are many other specifications needing feedback.

Have a look at the things that are coming, play with them, imagine the future version of you who gets to use them in your day to day work. Be an active part of the future web.

The CSS Layout Workshop

Super-charge your CSS Layout Skills by booking me to run an internal workshop, or to bring my workshop to your event.
Richard Le Poidevin on the 24 Jun 2015:

Looking forward to playing with Grid layouts. I’d love to have gutters in Flexbox too.

Carl Hughes on the 15 Oct 2015:

Thanks so much Rachel. I’m having a go at CSS Grids at the moment and the gutters were the thing I’ve been finding the most troublesome. The introduction of ‘column-gap’ and ‘row-gap’ will make things so much nicer.

Something I’m struggling with at the moment with the current chrome syntax is having fixed gutters using pixels or ems and then using percentage based values for the grid items. I think I prefer the gutters to be a consistent size but the content to squish smaller. Do you think this might be possible with the new syntax?

I’ve just subscribed to ‘www-style’ so I’ll try to discuss it on there too.

Posted a response? Enter the URL

This site uses Webmention. If you post a response to this post on your own site, and you also support Webmention I'll be notified automatically. If not you can add a link here.