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.