CSS Grid: "The Big Three" cheat code
Tags: css, ui
Published: 2020-03-11 20:59:35

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: Three different examples of elements arranged in a grid](https://dev-to-uploads.s3.amazonaws.com/i/9m5afnb6r6cvfbbxrs3k.png)
<figcaption>CSS Grid Examples: 3 different examples of elements arranged in a grid</figcaption>

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](https://dev-to-uploads.s3.amazonaws.com/i/5ikaiybspmqkh9l92uxv.png)
<figcaption>Example of grid-gap</figcaption>

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:`
```css
.item.a {
  background-color: #ff914d;
  grid-area: a;
}
```
<figcaption>CSS code snippet: how to use grid-area</figcaption>

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:`
```css
//container for (1) above
.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-gap: 15px;
  grid-template-areas:
  "a"
  "b"
  "c";
}
```
<figcaption>CSS code snippet: using grid-template-areas for image (1)</figcaption>

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.

{% codepen https://codepen.io/lexjames06/pen/PoqQgXX default-tab=css,result %}

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:
```css
//container for (2) above
.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-gap: 15px;
  grid-template-areas:
  "a b"
  "c c"
  "c c";
}
```
<figcaption>CSS code snippet: using `grid-template-areas` for image (2)</figcaption>

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.
![transformation of grid-template-areas for (2)](https://dev-to-uploads.s3.amazonaws.com/i/evz36ve1hgsosigs2x0v.png)
<figcaption>visual demonstration of grid-template-areas for (2)</figcaption>

{% codepen https://codepen.io/lexjames06/pen/wvaybqa default-tab=css,result %}

###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)***:
```css
//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";
}
```
<figcaption>CSS code snippet: using grid-template-areas for image (3)</figcaption>

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:
![transformation of grid-template-areas for (2)](https://dev-to-uploads.s3.amazonaws.com/i/rhe21ngcq9thueqpqfa0.png)
<figcaption>visual demonstration of grid-template-areas for (3)</figcaption>

{% codepen https://codepen.io/lexjames06/pen/jOPZoYV default-tab=css,result %}

##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](https://dev-to-uploads.s3.amazonaws.com/i/u5y3s5169spe96hpbed3.png)
<figcaption>Challenge grid to recreate</figcaption>

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.

{% codepen https://codepen.io/lexjames06/pen/QWbQRrG %}

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](https://css-tricks.com/snippets/css/complete-guide-grid/) 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! :)