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.
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!
Now that I've been through the process once, there are definitely some things I would do differently:
- 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.
- 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.