Испытание 32/32 - Грид раскладка страницы на 100%, но есть осадочек

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

Получилось вот так:
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 130px 130px 130px 130px;
grid-template-rows: 50px 100px;
}

.site-heading {
grid-column: 1 / 5;
}

.sidebar {
grid-column: 4 / 5;
grid-row: 2 / 4;
}

.video {
grid-column: 1 / 3;
}

Смущает, что пришлось второму ряду задать высоту 100px. Это так и задумано? Чисто теоретически может возникнуть ситуация, когда название позиции в каталоге товаров будет слишком длинным и не поместится в 1 строку, тогда 100px будет маловато.

2

каталоги лучше на флексах делать. либо длинные названия прятать по кат

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

.site-heading {
  grid-column: 1 / 5;
}

.sidebar {
  grid-column: -1 / -2;
  grid-row: 2 / 4;
}

.video {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}

а я вот так сделал на 100%. ряды = 50px auto 140px.

4

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

.site-heading {
grid-column-start: 1;
grid-column-end: -1;
}

.video {
grid-column-start: 1;
grid-column-end: 3;
}

.sidebar {
grid-column-start: 4;
grid-column-end: 0;
grid-row-start: 2;
grid-row-end: 4;
}

5

100%

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

.site-heading{
grid-column: 1/-1;
grid-row: 1/1;
}

.video{
grid-row: 3/4;
grid-column: 1/3;
}

.sidebar{
grid-column: -2/-1;
grid-row: 2/4;
}

6

.grid {
display: grid;
gap: 10px;
grid-template-areas: “k k k k”
“t t t ab”
“vd vd in ab”;
grid-template-rows:50px 100px auto;
grid-template-columns:130px 130px 130px 130px;
}
.site-heading{
grid-area:k;
}

.video{
grid-area:vd;
}
.description{
grid-area:in;
}
.sidebar{
grid-area:ab;
}

100% ,решил делать принципиально через области

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

.site-heading {
  grid-column: 1 / 5;
  grid-row: 1 / 2;
}

.video { 
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}

.sidebar {
  grid-column: 4 / 5; 
  grid-row: 2 / 4;
}