But we already design on grids, don’t we? Well… sort of, but everything you know about web design changed last March.
We’ve done terrible things, because we were left waiting for this moment—like all those years when we used and abused tables.
We told ourselves for a long time that we could use floats, and that that we were doing it right. We were pleased we got over the tables thing.
Of course, we had some frameworks that were grid-first, where the whole product was the grid.
On the lighter side of things, Grid Garden is a game for learning CSS grid layout—it's a fun way of bringing the code to life.
Things I’ve learned about CSS Grid, No. 1: I’ve taught undergraduate students about front-end design since 2002, and for upcoming designers this is the most intuitive layout technique to learn.
Things I’ve learned about CSS Grid, No. 2: those learning grid need to be canny web searchers, as there is a huge conversation about grids and CSS which predates CSS grid and is at best unhelpful.
Things I’ve learned about CSS Grid, No. 3: it’s obvious really but I realised when building this that a UL displayed as a grid retains its default padding and will need to be reset :)
Things I’ve learned about CSS Grid, No. 4: grid-gap seems to work differently between Safari and Chrome ¯\_(ツ)_/¯