CSS GRID
Published: 2022-12-29 03:29:51

Here we are CSS Grid. I don't know how about you but I am very shaky with Grid. You can do setup in many different ways and all the column rows etc... just gets very confusing at some times and I can't visualize it in my head.

So I just recently started to learn a way that makes so much sense.
It requires a bit more setup but it will really make it worth it at the end of the day. At least it did for me. As I made this discovery I wanted to share as I was really struggling to get a strong understanding of how to use Grid.

The magic word is `grid-template-areas`. You only have to use this and you will have a beautiful arrangement where you only have to worry about the parent element but not the child. 

Lets imagine we want to build this grid. (of course responsive in todays world)



![grid layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9enf3njuvf7xi8u19tc.png)

Before you would use _grid columns, rows, heights, spans etc_ to have this not so complicated display it was hard to wrap your head around it.

now with grid-template-areas I think it makes a lot more sense.

our boxes will have simple setup with a class name **box**.

```
.box {
  border: 2px solid black;
}
```
Yes, no height, no width, no nothing :D!!!!!

and the area where our 5 boxes will live is going to be called **box-grid**
we will give it the following specifications.

```
.box-grid {
  display: grid;
  width: min(95%, 70rem);
  height: 100vh;
  margin-inline: auto;
  padding-block: 2rem;
  gap: 1.5rem;
  grid-auto-columns: 1fr;
  grid-template-areas:
    'one'
    'two'
    'three'
    'four'
    'five';
}
```
Yes it is a bit strange. It has to be string and just like above the way you give the value to `grid-template-areas` is as many rows you want you will place the areas under each other. so lets say I want to have in this case 5 boxes on top of each other. Then the above syntax will have to be done.
Now if you leave it just this way will not do a lot.
You have to define which is 'one', 'two', 'three', 'four', 'five'.
Here is how to do it:

```
.box:nth-child(1) {
  grid-area: one;
}
.box:nth-child(2) {
  grid-area: two;
}
.box:nth-child(3) {
  grid-area: three;
}
.box:nth-child(4) {
  grid-area: four;
}
.box:nth-child(5) {
  grid-area: five;
}
```

With the `nth-child(number) ` you will basically select the children in this case the box classes and you tell each one of them which name they will listen to. 

Now if you check your display everything should be on top of each other and will take up all the space they have in the parent element which if **box-grid**.
This is amazing but we don't have our design ready yet. So far simple, now the best part comes. How this will be responsive. Lets say we want to give a specific layout to different screen sizes. 
It is super simple:

```

@media (min-width: 30em) {
  .box-grid{
    grid-template-areas:
      'one two'
      'one three'
      'four four'
      'five five';
  }
}


@media (min-width: 50em) {
  .box-grid{
    grid-template-areas:
      'one two two three'
      'one four five five';
  }
}
```

With the help of `@media` query and the names we have defined above (one, two, three, four, five) you basically tell CSS at what breakpoints should those boxes be display in what specific way. 
In my example at 

breakpoint 30em:
- 4 rows
- 2 columns

breakpoint 50em:
- 2 rows
- 4 columns

And that's it. You don't  have to worry about box sizes or gaps or auto margins or anything as grid will just populate whatever space it has in the parent element, based on your grid-template-areas.

I hope this helps to understand grid in a bit more straight forward way.