CSS网格布局-元素的可变跨度

Question

CSS网格布局-元素的可变跨度

3

我正在尝试创建以下网格：

1/3 | 1/3 | 1/3   (3 equal elements)
   1/2 | 1/2      (2 equal elements)
   1/2 | 1/2      (2 equal elements)

由于这个原因，我需要将每一行分成6列，以适应1/2和1/3。我似乎误解了grid-column命令，而我想设置每个元素占据多少列。以下代码不能正常工作。

.grid-front {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 1em;
}

.grid-front > div {
  background-color: red;
}
.top-left {
  grid-column: 1 / 3;
}

.top-centre {
  grid-column: 3 / 5;
}

.top-centre {
  grid-column: 5 / 7;
}

<section class="grid-front">
   <div class="top-left">1</div>
   <div class="top-centre">2</div>
   <div class="top-right">3</div>
   <div class="middle-left">4</div>
   <div class="middle-right">5</div>
   <div class="bottom-ll">6</div>
   <div class="bottom-lr">7</div>
   <div class="bottom-right">8</div>
 </section>

它显示所有网格元素。第一个元素（左上角）占用2个“空间”，然后有一个白色间隙（跨越2个空间），第二个元素应该在那里。然后有第二个元素（跨越2个空间），应该是第三个元素。然后剩余的元素均匀分布在第二行中。

我对它的理解有什么误解吗？

- Wasteland

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

你已经声明了.top-centre两次。第二个版本正在覆盖第一个。

.grid-front {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 1em;
}

.grid-front>div {
  background-color: red;
}

.top-left {
  grid-column: 1 / 3;
}

.top-centre {
  grid-column: 3 / 5;
}

/* ADJUSTMENT */
.top-right {
  grid-column: 5 / 7;
}

<section class="grid-front">
  <div class="top-left">1</div>
  <div class="top-centre">2</div>
  <div class="top-right">3</div>
  <div class="middle-left">4</div>
  <div class="middle-right">5</div>
  <div class="bottom-left">6</div>
  <div class="bottom-right">7</div>
</section>