Learning CSS Grid the easy way

For those who know me a little, I've always been that weird friend/colleague excited about CSS Grids and trying to push them for layout. But usually the answer is: "I don't know, CSS grids seem kind of complicated".

I always was conflicted about that answer, because I always felt Grids were really easy to get into, and they would be the clear way of doing things if we hadn't been going around breaking the flow of the pages for the past many years.
But recently I wanted to find tutorials to share and spread the Grid love all around. And to my surprise, every tutorial begins with the same description of the spec, and how to set a grid and place items in it by number. You end up having something like that as a "hello world":

.container{
  display:grid;
  grid-template-rows:repeat(4,1fr);
  grid-template-columns:repeat(3,1fr);
}
.header{
  grid-area: 1 / 1 / 2 / 4;
}
.footer{
  grid-area: 4 / 1 / 5 / 4;
}
.content{
  grid-area: 2 / 2 / 3 / 3;
}

Not very welcoming and intuitive if you ask me. I believe this is the reason people assume Grids are hard! I mean, even I always mix up the row/column order in the grid-area shorthand property, and I'm supposed to be the Grid guru.
The good thing is you really don't have to use it this way at all. There is a cleaner way, instantaneously understandable way to do it and it look like this:

.container{
  display:grid;
  grid-template:
    "header header  header" 1fr
    "...... content ......" 1fr
    "...... ....... ......" 1fr
    "footer footer  footer" 1fr
    / 1fr   1fr     1fr;
}
.header{
  grid-area:header;
}
.footer{
  grid-area:footer;
}
.content{
  grid-area:content;
}

It looks in the .CSS file just like it will looks in your layout. If you want to refactor it, you just have to change one property and everything falls into place. This is an absolute win for the web and us, web developers.

This being said, there's still way more to grid than just the templates and visually see your layout in the .CSS file. So I started to record a series of video, each in the 2 minutes range, around CSS Grids that I call "Noob 2 pro". My goal is to explore Grids potential from an usage-based perspective, where we use new properties for specific needs rather than just go down the list of properties like a cheat sheet.

The first part of the series is done, and being my first tutorial, it might still be a bit shaky at times, but I'm working to get it out there, I'm sure it will help some people!
Those 10 videos will make you self sufficient in static/responsive layouts using CSS grids. Then, as I add more videos, one every 2 or 3 days hopefully, push on and make you a Grid master. Soon your life will be easier!

Here is a link to the playlist on youtube

And here are the the videos:

No code here => 1. Announcement

No code here => 2. Pros/cons of CSS Grid

Code starts here => 3. Your first grid

1. Add your first item/cell
   

2. Add more items and gaps
   

3. Place one element by name
   

4. Place all the items by name
   

5. Shorthand grid-template
   

6. media queries refresh
   

7. Responsive Grids
   

8. Add empty cells
   

9. Refactor your UI in seconds