如何在CSS网格区域中保持相同的单列分别重复

Question

我有一个3列的CSS网格，其中包含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>