CSS Grid Layout Notes

This post will serve as a place to collect various interesting bits I discover about CSS Grid Layout as I use it in projects.

In this post


IE / Edge doesn’t support grid-{column|row}-gap

2017-06-14

We’ve started using CSS Grid Layout in limited doses at work, and I’ve been enjoying the experience so far. The browser support is good, and autoprefixer helps fill some of the gaps in the outdated IE / Edge version of the spec. There’s one little quirk I ran into today, however, that might change the way you use Grid in your layouts until support improves.

In the current version of the spec, you can define gutters between your tracks with the grid-gap properties. The IE / Edge version of the spec, however, has no such property—not even an analogue that could be prefixed.

To work around this limitation, you can add “dummy” columns to serve as your gutters.

/* with proper gaps */
.my-grid-container {
  display: grid;
  grid-column-gap: 1rem;
  grid-template-columns: 1fr minmax(min-content, 15rem);
}

/* for IE / Edge */
.my-grid-container {
  display: -ms-grid;
  -ms-grid-template-columns: 1fr 1rem minmax(min-content, 15rem);
}

This works, but the downside is that you now have an extra column to consider. With the “regular” approach, assigning items to specific columns is straightforward:

#item_one {
  grid-column: 1;
}

#item_two {
  grid-column: 2;
}

For IE / Edge, however, you have to skip the “dummy” column:

#item_one {
  grid-column: 1;
}

#item_two {
  grid-column: 3; /* ugh */
}

Microsoft have started updating their Grid support, so hopefully this work-around won’t be necessary much longer. In the meantime, this approach can be further improved upon by naming your columns.

.my-grid-container {
  display: grid;
  grid-template-columns:
    [main-start] 1fr [main-end]
    1rem
    [sidebar-start] minmax(min-content, 15rem) [sidebar-end];
}

#item_one {
  grid-column: main;
}

#item_two {
  grid-column: sidebar;
}

Explicitly naming columns allows you to reference them by name without having to guess which number they actually are. This isn’t a big deal if you only have two columns like the example, but would be helpful for more complex systems with larger numbers of columns and rows.


This post will be continually updated as I discover more intersting things about CSS Grid Layout.