Can someone explain me how i realize grid using css grid?

Hello!
Can someone explain me how i realize that layout, i’ve try so many times but allways i broke up at the end made him.
This is what i’m trying to do.
Thanks in advance!

Heres a codepen to my html and css

You were 99.99% there.

At the very least with grid-template-areas you need to have the same number of grid columns on each row otherwise your grid collapses. (If for some reason you wanted to leave one of the grid cells empty you would need to put a . as a placeholder.)

grid-template-areas:
  "header header"  /* note header stretches over two cols */
  "aside main-content";

That will create two rows with an equal number (2) columns leaving the width of cols to be dictated by the content within.

You could also explicitly declare the number of each columns and their sizes for a bit more control.

main {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-areas:
    "header ."  /* header only one col and next col left blank */
    "aside main-content";
}

That was exactly what was missing, I had notion that it was something I was forgetting or not understanding.
Now everything is clear, thank you so much!