Испытание 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.