CSS Grid is a very cool technology, and one I think more and more WordPress developers should both know about and use. While I’m hardly a CSS expert, that’s specifically why I feel well-qualified to tell you to learn CSS grid: if this non-expert can find it great and useful, surely it has arrived as a technology you must know.

In this article, we cover what CSS Grid is, how it’s different from existing CSS systems, and why you should learn it. We’ll cover the basics, and also link you to a few very useful resources and CSS Grid tutorials to get you started.

The Role of CSS in WordPress (and My Role)

Before we dive in, a quick format note. One of the weird things about WordPress is how “orthogonal” CSS is from core WordPress development. What I mean is that CSS is a large part of a WordPress developer’s needed expertise, but CSS knowledge is also expertise that has almost nothing to do with WordPress specifically. Other than knowing that WordPress has a body_class function, you mostly can learn CSS without thinking about WordPress.

This is because CSS can be, and is, used anywhere HTML is. And just as HTML is not specific to WordPress, neither is CSS. But that doesn’t mean you, as a WordPress developer, can or should be writing your HTML and CSS like it was 10 years ago. And until recently I was kind of guilty of that.

Because my interest in WordPress is mostly for simple publishing tasks, and for letting me find another place to write server-side PHP code, I really haven’t thought much about CSS in a while. That’s not to say I don’t intermittently write CSS for personal projects, just that I wouldn’t call myself a CSS expert.

What on earth is CSS Grid?

So, let’s get back to CSS Grid. One of things I’ve struggled when trying to explain CSS Grid to people is that people are like “oh, we’ve been using grid systems in CSS for years.” And those people (Fred very much included), are right, in a way. They’ve been using grid-based layout, made possible with CSS since two-thousand-and-something.

But a grid-based layout isn’t quite what I mean by “CSS Grid.” To further highlight the difference, to the whole of this article I’ll say “CSS Grid” when I’m talking about the (kind of) new CSS standard, and “grid layouts” to mean the generic idea of using a systematic grid to give a webpage, poster, or other design a sense of cohesion and pleasing symmetry.

Overview of Grids in Design

So using grids for layouts is certainly older than I am. Because I am not an experienced or educated designer, I’ll not venture to offer a history of it. But suffice it to say that probably as long as there have been pages there have been attempts to apply a design-system to them.

And one of the better design-systems that people have applied to pages is a grid. Mostly commonly, I think of a 12 column grid. When I think about web design as I first start to learn it 10 years ago, I think about the “960 pixel grid system”. That idea, as the banner across the page makes clear, was more-or-less made superfluous as smartphones made it necessary for web pages to look good for devices other than desktop and laptop web browsers.

“A CSS Grid-layout System” or “CSS Grid Framework”

More commonly, people who are confused by my invocation of “CSS Grid” are confusing it with a “responsive grid layout system.” Fred most commonly mentions and talks of to me that the Bootstrap CSS/layout/markup system comes with a 12-column grid baked in. These “responsive grid systems” are an improvement over the 960 system I mentioned above in that they’re “responsive aware.” Based on the markup and their hidden powers, they know that as the browser window gets narrower something that was the right third of your grid system will naturally want to becomes its own grid row.

This sort of responsive grid system is something I know about almost exclusively through second-hand knowledge and hearsay. I abandoned the effort to keep my CSS up-to-date around the time Fred and I started working together in 2013, and haven’t really been good as CSS since then. (Probably I was never good, but that’s a whole other conversation. 🤪)

What CSS Grid Is (and Isn’t)

What I mean by “CSS Grid” isn’t “a responsive grid system leveraging CSS someone else wrote,” nor “you implementing a grid-layout system using things like floats.”

Instead, what I mean by “CSS Grid” is a CSS-native system by which you can simply declare that your grid system has so many columns and so many rows and that this content should span two of those columns while that one should just take up one. And instead of a 12 column grid you can make it a 5-column grid, or a two column grid. It’s very powerful.

The power of a CSS-native Grid system may be obvious to you, but here are what I see as the big benefits:

1. Without pulling in any third-party code, I can do layout things in a way that makes sense.
2. A final complete death of float-based CSS layouts. 🙌
3. Flexibility far about what any “grid framework” gave you before. Want a fixed-width column for something on the side of your site, and then a flexible distribution of your page? Oh yah, we’ve got that.

Some Great CSS Grid Tutorials + Tools

My goal, as I said, isn’t to explain CSS Grid (Level 1) in depth. I’ve used it a few times, but I hardly consider myself an expert on how to use it. Instead I just want to point you to some of the resources I’ve found helpful in coming to terms with CSS Grid.

Can I Use CSS Grid? CSS Grid vs Flexbox

Can you safely and without a “polyfill” use CSS Grid today? Probably. I generally refer to caniuse.com for this kind of question, and it reports that 92% or worldwide traffic supports CSS Grid Level 1. For a basis of comparison, the next most recent and relevant technology, Flexbox, reports 98% worldwide using the same stats.

So neither of these is clearly going to be usable on any site for every visitor of every conceivable site. But both are getting to the point that you should consider them. (Especially if you’re running a more-technical-than-most-audience site, like ours.) And I think the CSS Grid vs Flexbox stats illustrate that if you’re comfortable with one, you should probably get comfortable with the other. (BTW, I’m told by CSS experts that a discussion of “grid vs flexbox” is a “red herring” argument which is a waste of time because they have very different purposes and uses. I’m not qualified to say more.)

CSS Grid Garden: Awesome

If you’re old school like me, you may be familiar with CSS Zen Garden. It was a place (back in the bad old days when CSS was brand new) that people showed off the power of CSS vs HTML with its styling baked in.

CSS Grid Garden is not actually an updated CSS Zen Garden, as I initially thought. It’s instead an awesome and fun little game to get you more comfortable with CSS Grid. I just played through it again, and learned some more about grid.

It’s by the same people as the great, but only kind-of-relevant Flexbox Froggy.

Other Great CSS Grid Resources

Here’s a short list of other resources I’ve either used to be better at CSS grid, or from which I wish I’d learned it.

• Jen Simmon’s Layout Land series/playlist on YouTube was the first place I really started to understand the possibility and power of CSS Grid.
• Rachel Andrew’s Grid by Example is definitely the place I’ve most frequently gone to copy snippet. I’m a visual learner, so I love how easy it is to scan the CSS Grid examples and find a snippet that shows off doing exactly what I’m going for.
• A great CSS-Tricks reference article which lays out all the details in a stylish and at-a-glance way.
• Learn CSS Grid looks like another great single-serving page to make sense of the whole thing.

If you’ve got other CSS grid tutorials or guides that you love, please leave them in the comments so that they can help others learn this important topic 🙂

CSS Grid: Just the Beginning

I can honestly say that learning about and then using CSS Grid was the first time I was genuinely excited to get better at web design in years. Part of that is because I finally had to. But the other part is that finally with CSS Grid I think we’re finishing the work that the Web Standards Project started working on all those years ago: to make websites easy and fun to create, and make that easy and fun system widely available and broadly compatible. Score one for the good people!

It’s just a beautiful and fun thing to make a CSS Grid layout in a way that I had never experienced before. I first learned web design in the era of tables. I made the leap to doing layouts with CSS floats, but that always felt like a kludge-y half-solution to the wrong problem. (It was.) Finally, in CSS Grid I see a way that even someone as mediocre at visual design as myself can make a pretty functional and pretty layout for the web.

I hope you’re even half as excited as I am. Good luck, and I hope you relish learning the full power of CSS Grid 🙂