Over the last year or so, I’ve been learning CSS Grid Layout. And the more I work with it, I’ve been reflecting on how I’ve worked with it. Because generally, my trajectory has looked something like this:

  1. “I’m going to learn how to use this to produce layouts I’m familiar with.”
  2. “Huh, I can produce those layouts more efficiently than I ever could before.”
  3. “ — okay, this lets me create entirely new designs I’d never even considered.”

When it comes to Grid, I’d guess I’m currently somewhere between #2 and #3. I’ve gotten comfortable with the fundamentals, and have started experimenting with layouts that are, well, dramatically different than what I’m used to. But before I got to that point, I spent a considerable amount of time on step #1. We’re talking weeks, if not months. I learn faster when I’m under deadline, and last year other priorities took, well, priority.

But more broadly, I’ve realized this is the way I approach most new ideas I encounter: use a new thing to do what I’m already doing; use that new thing to do my work better; then, eventually, I can start doing things I’d never thought possible. In other words, I need to orient myself before I can properly start learning. I need to make the new, strange thing familiar to me, and I do that by mapping it to what I already know. I’m doing it with Grid Layout now, but I had to step through that slow, laborious process with pattern libraries, with sundry new CSS techniques — heck, even with responsive design.

I’ve been thinking about this because many of the Grid resources I’ve seen have focused on the third step. Not all of them, mind you — far from it.1 But much of what I’ve seen recently focuses on the third step, aimed at folks who’ve mastered the fundamentals, and looking to do considerably more. And just to be clear, that’s marvelous! It’s downright exciting to think about what these technologies could do for us, and how they’ll change the way that we work. But when we’re producing these tutorials, or writing those talks, maybe it’s worth including a few pointers for those who aren’t quite as far along in the process.

Anyway, I guess I wanted to say this: if you’re just now starting to learn CSS Grid (or JavaScript, or responsive design, or whatever), that’s great; if you haven’t even had a chance to start, that’s fine too. After all, those are both steps on that three-part process. Whenever the opportunity arises to learn that new thing, you’ll get there. And when you start learning that thing, I’d love to see what you make with it.

On reread, I think this post is primarily a note for myself. But hey, maybe you’ll find it helpful, too.

  1. Off the top of my head, here are some Grid-related resources that were massively helpful to me when I was getting underway:

    ↩