I’m surprised how little fuss people make over CSS Grid. This advancement in CSS is nothing short of remarkable for those of us who work with grid-based layouts on an almost daily basis. The ability to quickly and efficiently develop a site without the need to code our grids or use a pre-built system like Bootstrap should be considered a ‘game changer’ for the design world.
CSS-Tricks first published their guide on Grid in 2016 but only now is it starting to catch on with developers. I didn’t start using it until 2018 when it came time to learn Bootstrap 4. I grew tired of how massive Bootstrap seemed and how ‘overkill’ it was for 90% of my projects. (I don’t need five different kinds of alerts built into every project.) When Bootstrap 4 came out with all its changes and new things to learn, I started to wonder if there was a simpler way to get things done. That’s when I found the lovely CSS Grid.
If you’re unfamiliar with CSS Grid, I’ll let CSS-Tricks explain it:
CSS Grid Layout (aka “Grid”), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces. CSS has always been used to lay out our web pages, but it’s never done a very good job of it. First, we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). Flexbox helped out, but it’s intended for simpler one-dimensional layouts, not complex two-dimensional ones (Flexbox and Grid actually work very well together). Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.
My Personal Bookmarks
For your convenience, I’ve compiled my favorite CSS Grid resources here, my most used Grid bookmarks. These guides and tools helped me learn Grid over the last year, and I hope sharing them will help others master CSS Grid and popularize it in the future.
Alright, let’s get started.
1. Wes Bos’ Free CSS Grid Course
Wes is a phenomenal teacher. There are the part-timers on those course sites, and then there’s Wes Bos who is a true professional and a gifted instructor. Nothing against those others, but you’ll undoubtedly notice a difference when you take his courses. This particular course is where I first learned the basics of CSS Grid. I read a few articles prior, but nothing clicked for me until I learned from Wes.
If you want to jump into CSS Grid, do yourself a favor and sign up for Wes’ free course. Four hours later you’ll be comfortable working with Grid.
2. Firefox Developer Edition
If you’re working with CSS Grid, then make Firefox Developer Edition your default browser. This browser edition has the most in-depth CSS Grid tools available, and you’re going to need them when you’re troubleshooting your code.
3. CSS-Tricks Complete Guide to CSS Grid
This bookmark is probably one of my most-used for Grid. I check this guide whenever I’m setting up a new project. There are a lot of little things to remember with CSS Grid, and this guide acts as the perfect cheat sheet for me.
4. Mozilla CSS Grid Playground
Mozilla beautifully illustrates how CSS Grid works and gives you a lot of great information. I recommend this to anyone wanting to learn and master Grid.
5. CSS Grid Template Builder
Anthony Dugois coded this excellent template builder. I use it with almost every project when I’m setting up my template structure.
6. CSS Grid Cheat Sheet
This cheat sheet is a great visual representation of CSS Grid and allows you to see your changes in action. I recommend you play around with it to get an idea of what Grid can do.
7. CSS Grid Starter Layouts
CSS-Tricks put together a fantastic list of starter layouts. Not templates, layouts all cleanly coded in CSS Grid. If you’re trying to start your project and hate a blank page, try working with one of these.
8. Grid by Example Layouts
Grid by Example has a massive list of starter layouts. Pick any one of these to start your CSS Grid project off on the right foot.
9. Quackit CSS Grid Templates
Do you still need more layout ideas? No problem, this resource has even more CSS Grid layouts to make you happy.
10. Grid by Example
If you still want some more information about the nuances of CSS Grid, then I recommend Grid by Example. I’ve already listed it for templates, but the entire site is worth your time when learning the most you can about CSS Grid.
Learning CSS Grid
I hope you get a lot out of these resources and that they help you master CSS Grid as they helped me. The best advice I can give you is to use what you learn. I didn’t put CSS Grid into action right away. I took Wes’ course then got busy doing other work and didn’t return to CSS Grid for months. By the time I got back to it, I had already lost most of the stuff Wes taught me. I had to dive back into his course and into these resources to master it one last time. Now I try to code in Grid whenever possible so that it stays fresh in my mind.
Best of luck.