The 5 Stages of Grid Love

December represents the month the I first fell in love with the CSS Grid specification. I redesigned my blog to use CSS Grid in December 2016 (before Grid was in browsers). Looking back on the past year, I’ve identified the five stages of my love with this specification.

1. Some very smart people I respect are proponents

If you follow any CSS news, you’ll know that 2017 was the year of Grid. However, two technology luminaries paved the way for Grid’s adoption: Jen Simmons and Rachel Andrew.

At the time I learned about Grid, I was teaching an HTML/CSS course to college journalism students. Mid-way through each semester, I would show Jen Simmons’ talk “Modern Layouts: Getting Out of Our Ruts.”

In this talk, she mentioned lots of ways to change the way we design for the web. There’s only a little bit of time spent on Grid, but it was enough to pique my interest. Watching this talk was my first introduction to Rachel Andrew’s work.

If you’re talking about Rachel Andrew and Grid, you’re talking about Grid by Example. This is a great set of resources for learning the basics of how Grid works.

2. A Simple Grid

Once you get past the basic examples, it’s time to format your first grid.

The very first practical code you will write will be a simple grid with uniform columns.

This will blow. your. mind. It blew mine. The amount of design power that three lines of CSS will grant you is amazing.

display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

I wrote a blog post — Make a More Flexible Cover Screen with CSS Grid — that illustrates exactly what this is capable of.

3. A Responsive Grid with No Breakpoints?!

Next you learn about the repeat() function and minmax().

With these two methods, you can replace a dozen lines of code with only three. Tutorial: How To: Use CSS Grid Layout to Make a Simple, Fluid Card Grid.

Trust me, you’ll want to use this everywhere.

4. Named Grid Areas

This feels like the future. I can create a string representation of my grid’s areas and then assign my HTML elements to that area.

    display: grid;
    grid-template-columns: 300px 50px 1fr;
    grid-template-areas: "header header header"
                         "sidebar  .    main"
                         "footer footer footer";

5. Named Grid Lines

While named Grid Areas is nice, it’s amazing how flexible you can make a design by naming grid lines.

In fact, every grid line can have multiple names. This allows for a designer to change an elements location on the fly. Instead of changing the entire grid for mobile, you can adjust how elements flow into the grid. You can do this in small ways as well as large.

I’ve played a lot with this functionality, but this blog post by Tyler Sticka is a great, simple primer on it: Breaking out with CSS Grid Layout

And much more

Of course, there’s much more to love in Grid, but these stages feel like how adoption goes. 

1. This looks neat

2. Oh, yeah, I can do Bootstrap stuff on my own. This is neat

3. Wait… wait. This is awesome for making simple grids… Like really awesome!

4. Oh my God, my entire layout needs just got simplified!

5. Power! Unimaginable Power! 

Yeah… that’s how I feel. So much layout power.

How did you learn to love Grid? What are the killer features or workflows that you use?