Question

使用以下CSS：

.container {
  display : grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    'first second'
    'first second'
;
}

.first {
  grid-area: first;
  width: 200px;
  height: 200px;
  background-color: red;
}

.second {
  grid-area: second;
  width: 200px;
  height: 200px;
  background-color: #0eb5d6;

这些盒子会堆叠在一起（显示为一个红色，一个蓝色）：

  <div class="container">
    <div class="first"></div>
    <div class="second"></div>
    <div class="first"></div>
    <div class="second"></div>
  </div>

但是，这些不会堆叠，并且正确显示为具有相同css的2行：

  <div class="container">
    <div class="first"></div>
    <div class="second"></div>
  </div>

  <div class='container'>
    <div class="first"></div>
    <div class="second"></div>
  </div>

在我的实际用例中，我尝试使用CSS网格对齐表单。如果可能，我不想在行中使用div。还是这是避免将元素堆叠成一行的唯一方法？

Answer 1

请注意，这里grid-template-areas 形成一个矩形，因此first和second 跨度为其列。而且多个声明只会重叠：

为列出的每个单独的字符串创建一行，并为   为字符串中的每个单元格创建。其中的多个命名单元令牌   在各行之间创建一个跨越网格的单个命名网格区域   相应的网格单元。除非这些单元格形成一个矩形，否则   声明无效。

MDN

您可以在此处删除 grid-template-areas-如果没有它，它可以正常工作。参见下面的演示：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.first {
  width: 200px;
  height: 200px;
  background-color: red;
}

.second {
  width: 200px;
  height: 200px;
  background-color: #0eb5d6;
}

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="first"></div>
  <div class="second"></div>
</div>

为什么我的模板区域没有按预期堆叠？

1 个答案: