Let’s get straight into code: the CodeAcademy grid tutorial will take you through key concepts of CSS grids.
OK, you have seen some of the code. So why would we design on a grid?
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.
We knew it wasn’t right, but we built tools to survive—front-end frameworks all feature grid systems which provide us with ready to go CSS-hack-grids.
Those frameworks though—they can be a pain to work with and you might not need a CSS framework at all if you could just solve your layout woes.
Of course, we had some frameworks that were grid-first, where the whole product was the grid.
Some of those grid frameworks took us full circle, back to (mis)using tables.
For a while there, the bleeding edge idea was to use flexbox for grids, but that wasn’t really what flexbox was for at all.
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.
Rachel Andrew’s Grid by Example demonstrates most parts of spec and offers loads of cut and keep patterns. Essential.
CSS Tricks are my go to trusted source for clean and correct tutorials, so their Complete Guide to Grid is a must read and a valuable resource to have on hand while working through your first projects.
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.
Specs and tech shape our aesthetics. We don’t know what a CSS grid based web looks like yet.
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 :)
It’s important to know the spec but it’s also important to think about the actual design of grids.
Formalism in design is great but your grids will really get exciting when you start breaking them
Things I’ve learned about CSS Grid, No. 4: grid-gap seems to work differently between Safari and Chrome ¯\_(ツ)_/¯
If you’re worried about pushing a grid project to production you can use feature queries in CSS to make a solid non-grid fallback.
By now you probably won’t be surprised to learn that Rachel Andrew has written the book on CSS Grid—it’s published by A Book Apart
Is it really safe to start using CSS Grid Layout?. tl;dr: yes, yes it is.