代码之家 › 专栏 › 技术社区 › AlphaX

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

css3 css

0

AlphaX · 技术社区 · 7 年前

我有一个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>

1 回复 | 直到 7 年前

1

Temani Afif 7 年前

解决方案是简单地为每个列使用不同的名称。正如您已经注意到的,使用相同的名称意味着相同的区域将使用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>