It’s Time to Learn CSS Grid
CSS Grid is the layout specification we’ve all been waiting for! Finally, the power to create flexible, elegant grid-based layouts on the web that are built into CSS and supported by virtually all modern web browsers. Move beyond the limits of frameworks and learn to build any grid you need!
Below I’ve compiled the resources that I found most helpful when learning Grid, and the ones I return to most often. I put them in the order of “Watch - Play - Read” because that was what worked best for me to fully absorb the concepts. Grid is definitely a game-changer, and might require some shifting of your mental models of positioning and hierarchy. But hopefully you will find, like I did and continue to, that the power and excitement of this new technology will keep you pushing through to your first live grid implementation. Happy learning!
If you’re like me and you learn best with structure, this free introductory course is an amazing place to start. It’s a decent time commitment, but you will walk away with more than a solid understanding of Grid. It’s video-based with tons of well-organized practice files so you can follow along (highly recommend following along to get the concepts to really stick).
Jen Simmons is a powerhouse of CSS knowledge, and one of the top people I would suggest following if you’re interested in learning about anything front-end. She has dubbed Grid to be a new era of web design, post-responsive, now “intrinsic.” Her explanations of basic concepts and easy example layouts are a great way to soak up a lot of Grid knowledge, and all of the videos in her Layout Land channel are helpful for anyone on a front-end journey.
Play along by aligning water with plants on a grid to learn about how rows and columns work and how to place items. Simple and interactive, a great way to solidify concepts and get practice in!
A pre-setup visual code editor to test out different grid attributes and combinations. A great way to learn is to try to guess what will happen each time you make a change, and see if your expectations were correct!
Read (or, Refer-To)
As usual, MDN has a rich collection of detailed documentation on CSS Grid including examples, details of the specification, glossaries, guides and more. This is the place you go when you are struggling to get those
grid-template-rows to behave just right and you need to understand the nitty-gritty just a bit more.
Like it’s flexbox cousin before it, I find myself referring back to this guide every time I need to write a new grid layout. The side-by-side design and visual explanations are extremely helpful as a quick reference for what elements need which attributes.