It feels like CSS Grid has been coming for a long time now, but it just now seems to be reaching a point where folks are talking more and more about it and that it’s becoming something we should learning. I started reading a few posts and playing around with the syntax the past couple of weeks, but asked my fellow CSS-Trickster Miriam Suzanne to grok through it with me on a video hangout.
We spent our time poking at the very basics of CSS Grid and what we learned is that it’s a lot less scary to start using it than either of us expected. We start with a simple example and then noodle our way through the CSS Grid properties to learn what other things it is capable of handling without getting too far in the weeds.
Here are a few resources we mentioned during our chat that are worth linking to:
- A Complete Guide to Grid – A comprehensive overview of CSS Grid, including its properties and a glossary of important terms and concepts.
- CodePen Demo – This is the simple example that we started with in the video and advanced as we went.
- CSS Grid and Grid Highlighter – This tool was mentioned toward the end and it provides a way to visualize the Grid layout using Firefox DevTools.