instagram GitHub

Getting to know CSS Grid

Since the release of CSS grid I've been waiting for fresh build to try the new specification out. Then Past Present Future came along, a new project with Environment Lethbridge that aims to engage people with Lethbridge's relationship to the environment - historically, currently, and speculatively. The content is a mix of archival material, quotes, graphs, and photographs, broken up into topical sections - lots of variety in size and shape that would make for interesting layouts with CSS grid.

Early wireframe experimenting with layouts for the 6 topics.

There were 6 topics that carried through the 3 sections, each with a unique set of content, so 18 mini grid-based layouts. Doable with floats or inline-block elements, but it would have been a mess of classes. But with CSS grid - what a dream!

See the project on GitHub

Now that I've been through the process once, there are definitely some things I would do differently:

  1. I didn't use grid-template-areas. And I should have. This wasn't a big deal until I got into adjusting the grid for mobile. Rather than updating one rule, I was updating each one to change their grid-column start point and span. In hindsight, had I assigned them a grid-area instead, I would only have to change the grid-area-template in my media queries. 
  2. It took me a while to find out that IE 11 and Edge were working with the old specification of grid. This meant a few things:
    • I had to do another pass through to add in the -ms- prefix with the properties from the old spec.
    • The old spec doesn't include the grid-column: 1 / span 2 type values, rather they need to be set in two separate properties. All the more reason to use grid-template-areas (in old spec it's grid-template)
    • The old spec doesn't recognize grid-gap so the gutter has to be treated as it's own column, which changes the column start and span values. Again, more reason for relying on grid-template-areas instead.