CSS Grid: "The Big Three" cheat code

I have to start with a disclaimer that I'm a big believer in the 80/20 rule; 20% of the work will get you 80% of the results.

While I don't condone only learning 20% of your craft, if CSS really isn't your area of expertise, but need to use it here and there, 20% of grid will get you a LONG way!

This guide will give you that 20% of grid and if you remember The Big Three, you will conquer most of the workload you need out of grid.

The Problem

You're creating some kind of UI and you want to lay things out in a very structured order, maybe a collage of different size and shape pictures?

You have a defined space you want work in and you want to simply place the pictures in the exact space of the grid you're looking for.

For Example:

CSS Grid Examples: 3 different examples of elements arranged in a grid

Well would you believe me if I told you that you can accomplish all three of those with only three lines of code? No?! Good thing, it's not quite three lines of code, but it's not far off. Let me explain...

The Big Three

There are many big threes in the world, but here we're talking about the three properties you need to accomplish the above layouts in grid; grid-gap, grid-template-areas, and grid-area.

So what do they all do?

grid-gap:

Example of grid-gap

As you can see, it very much does what it says on the tin. The best part, it will make those spaces between your elements, not around them (which in my opinion is a much more natural layout choice - you can always add margins on the container, if you want space around).

grid-area:

.item.a {
  background-color: #ff914d;
  grid-area: a;
}

CSS code snippet: how to use grid-area

This is simply the name you want to give each element. Here you have the element A in image (1), that has two classes applied to it; the item class that all elements have assigned, and the a class - applied only to element A.

When you know The Big Three, it may be intuitive to explain this last as it's the only property applied to the child elements, but I think it's easier to understand grid-template-areas by getting this part down first.

grid-template-areas:

//container for (1) above
.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-gap: 15px;
  grid-template-areas:
  "a"
  "b"
  "c";
}

CSS code snippet: using grid-template-areas for image (1)

Using the example of (1) above, this code snippet is for the container of the grid you're working with. We've simply defined a 500px square with gaps in between each element of 15px.

We've then used the grid-template-areas property to define both the rows and columns of the grid.

As we only see a difference in rows here, let's use example (2) above to step up the difficulty level.

The new problem: breaking it down

So to accomplish (2), we need two elements to sit side by side in the top row, and then a third element on a row by itself, but twice as tall as the top row.

That would look a little something like this:

//container for (2) above
.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-gap: 15px;
  grid-template-areas:
  "a b"
  "c c"
  "c c";
}

CSS code snippet: using `grid-template-areas` for image (2)

What we've essentially done here is separate the grid into 6 individual boxes, assigned each one to an element, and any side-by-side elements with the same assignment automatically fill in the gaps between.

visual demonstration of grid-template-areas for (2)

What about (3)?

So how do we accomplish (3) with that gap in the grid? I promise, it's so much simpler than you probably expect.

Let me introduce you to ".", a character that solves all your gap problems in grid-template-areas.

The "." simply acts as a placeholder for a gap that you want.

Let's take a look at how we can use that in (3):

//container for (3) above
.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-gap: 15px;
  grid-template-areas:
  "a a a b b b"
  "a a a b b b"
  "a a a b b b"
  "c c . . e e"
  "c c d d e e";
}

CSS code snippet: using grid-template-areas for image (3)

Now this may look like a lot to digest at first glance, but by visualising each of those assignments as a small box, it will be much clearer (see below). Within a couple of test scenarios, you'll get the hang of how to do this.

To help visualise (3), it would be represented like this:

visual demonstration of grid-template-areas for (3)

Conclusion

A quick recap of The Big Three:

grid-gap - defines the gap between all separate children elements.
grid-area - gives each child element a unique name.
grid-template-areas - defines what area each element will cover.

The more you break down your grid-template-areas the more you can control the width and height of each element in your grid, especially in relation to their other elements of your grid.

Take a stab at recreating the 3 layouts we've discussed, and see if you can do it by memory.

Remember, this isn't the only way to achieve these results, it's just a simple way to get great results without needing to remember lots of different properties.

Last minute challenge

If you feel comfortable using The Big Three, really push yourself to see if you can recreate this:

Challenge grid to recreate

It will be slightly more difficult than the previous layouts, but I've created a codepen for you to check against if you get stuck.

Thanks for reading!

If you want to know more about CSS Grid, all of the other properties and where they could be useful, check this out.

If you have any questions, comments or concerns, don't hesitate to leave them below. Or if you simply want to say hi, don't be shy! :)

Comments

[Aleksandr Hovhannisyan]

grid-template-areas is pretty awesome! Unfortunately, it's not a good option for responsive layouts (you'll have to use media queries). I prefer to use grid-template-columns for this reason. Other than that, the clear advantage goes to grid areas for legibility.

[Lex]

What issues do you have when using grid-template-areas in responsive design? I use it for responsive design and haven't yet needed to use media queries yet, but I'm only 1 person haha. In my experience, they both have their place and while I probably use grid-template-columns and grid-template-rows more often, sometimes I find them unnecessary, and like you said, grid-template-areas is great for legibility.

[Aleksandr Hovhannisyan]

The key problem with grid-template-areas is that the columns can't wrap if they need to, unless you force them to with media queries and restructuring the areas.

With grid-template-columns, you can use minmax and auto-fill/fit.

[Maximilian Burszley]

Great writing, Lex. The only thing I feel is missing is maybe a link to documentation where it's relevant. I really appreciated the images (maybe an interactive playground like codepen would enhance the content as well?).

[Lex]

Thank you! That's a really good suggestion. I've added a link to a really good full guide that goes more into detail on all of grids properties and use-cases for them. I've not worked with embedding codepen before, but I've given it a go and added some in. Hopefully these help!

[Ghost]

Hi :)

How well adopted by browsers is this and if not much, how much of a mess leaves if unsupported?, any strategies to deal with it?.

And also, how well behaved is with flexboxes inside?, I'm picturing using a grid as a page layout with flexboxes on some areas for dynamic content.