css - 如何在 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>