Как сохранить одинаковые столбцы отдельно повторяются в области сетки CSS

Question

У меня есть сетка css из 3 столбцов с 5 строками, настроенными следующим образом:

Проблема: Яизо всех сил пытаясь разделить строку 4 на 3 столбца с помощью синтаксиса области сетки

Примечание: Я знаю, что это можно решить, назначив конкретные начальную и конечную точки каждомуdiv, например hero h1, чтобы охватить столбцы, но мне было интересно, есть ли способ сделать это аккуратно через настройку области сетки и имена в оболочке.

.sp-herowrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
  "heroh1 heroh1 heroh1"
  "heroh2 heroh2 heroh2"
  "heroh3 heroh3 heroh3"
  "herobenefits herobenefits herobenefits" /* not sure how to set this line up so its not spanning across but repeated 3x for the 3 columns. When I reduce it to only 1x herobenefits, it screws up the whole table */
  "herocta herocta herocta";
}
.sp-heroh1 {
  grid-area: heroh1;
  border: 1px solid black;
}
.sp-heroh2 {
  grid-area: heroh2;
  border: 1px solid purple;
}
.sp-heroh3 {
  grid-area: heroh3;
  border: 1px solid red;
}
.sp-herobenefits {
  grid-area: herobenefits;
  border: 1px solid blue;
}
.sp-herocta {
  grid-area: herocta;
  border: 1px solid green;
}

  <div class="sp-herowrapper">
<div class="sp-heroh1">hero h1</div>
<div class="sp-heroh2">hero h2</div>
<div class="sp-heroh3">hero h3</div>
<div class="sp-herobenefits">hero benefits </div>
<div class="sp-herocta">hero cta</div>
</div>

Answer 1

Решение состоит в том, чтобы просто использовать другое имя для каждого столбца.Как вы уже заметили, использование одного и того же имени означает, что в одной и той же области будут использоваться 3 столбца.

.sp-herowrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
  "heroh1 heroh1 heroh1"
  "heroh2 heroh2 heroh2"
  "heroh3 heroh3 heroh3"
  "herobenefits1 herobenefits2 herobenefits3" 
  "herocta herocta herocta";
}
.sp-heroh1 {
  grid-area: heroh1;
  border: 1px solid black;
}
.sp-heroh2 {
  grid-area: heroh2;
  border: 1px solid purple;
}
.sp-heroh3 {
  grid-area: heroh3;
  border: 1px solid red;
}
.sp-herobenefits1 {
  grid-area: herobenefits1;
  border: 1px solid blue;
}
.sp-herobenefits2{
  grid-area: herobenefits2;
  border: 1px solid blue;
}
.sp-herobenefits3 {
  grid-area: herobenefits3;
  border: 1px solid blue;
}
.sp-herocta {
  grid-area: herocta;
  border: 1px solid green;
}

<div class="sp-herowrapper">
<div class="sp-heroh1">hero h1</div>
<div class="sp-heroh2">hero h2</div>
<div class="sp-heroh3">hero h3</div>
<div class="sp-herobenefits1">hero benefits </div>
<div class="sp-herobenefits2">hero benefits </div>
<div class="sp-herobenefits3">hero benefits </div>
<div class="sp-herocta">hero cta</div>
</div>