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.

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:

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;
}

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";
}

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";
}

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";
}

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.

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

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! :)