Испытание: грид-раскладка страницы

Курсы Знакомство с гридами
1

не знаю все ли по правилам но получилось

code

.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 130px 130px 130px 130px;
grid-template-rows: 50px 100px;
}

.site-heading{
grid-row: 1;
grid-column: 1 / 5;
}
.sidebar{
grid-column: 4;
grid-row: 2 / 4;
}
.video{
grid-column: 1 / 3;
}

1 лайк
2

Никак не могу реализовать через именование места, прям вообще остановился. Даже через псевдоклассы товары размечал - бесполезно.
Помогите, почему не работает?
З.Ы. не спрашивайте зачем - вот ХОЧУ.

не получается через именование 
.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 130px 130px 130px 130px;
  grid-template-rows: 50px 100px auto;
  grid-template-areas:
    "head head head head"
    "good1 good2 good3 side"
    "vid vid desc side";
}
.site-heading {grid-element: head;}
.good:nth-of-type(1) {grid-element: good1;}
.good:nth-of-type(2) {grid-element: good2;}
.good:nth-of-type(3) {grid-element: good3;}
.sidebar {grid-element: side;}
.video {grid-element: vid;}
.description {grid-element: desc;}

А через размерность воть:

моё рабочее 
.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 130px 130px 130px 130px;
  grid-template-rows: 50px 100px;
  
}
.site-heading {grid-column: 1/-1}
.video {grid-row: 3; grid-column: 1/3}
.sidebar {grid-row: 2/4; grid-column: 4}
3

А разве свойство не grid-area используется?

2 лайка
4

спасибо, я походу на солнышке перегрелся :joy:
прилагаю исправленное

через именование областей 
.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-areas:
    'head head head head'
    'good1 good2 good3 side'
    'vid vid desc side';
  grid-template-columns: 130px 130px 130px 130px;
  grid-template-rows: 50px 100px;
}
.site-heading { grid-area: head; }
.good:nth-of-type(1) { grid-area: good1; }
.good:nth-of-type(2) { grid-area: good2; }
.good:nth-of-type(3) { grid-area: good3; }
.sidebar { grid-area: side; }
.video { grid-area: vid; }
.description { grid-area: desc; }

можно чуть “считить”:

оно само залезет в пустоты 
.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-areas:
    'head head head head'
    'good . . side'
    'vid vid desc side';
  grid-template-columns: 130px 130px 130px 130px;
  grid-template-rows: 50px 100px;
}
.site-heading { grid-area: head; }
.good:nth-of-type(1) { grid-area: good; }
.sidebar { grid-area: side; }
.video { grid-area: vid; }
.description { grid-area: desc; }