CSS GRID

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)

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.