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

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;

这些盒子会堆叠(显示为 1 个红色，1 个蓝色):

  <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 跨越他们的专栏。并且多个声明只会重叠:

A row is created for every separate string listed, and a column is created for each cell in the string. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.

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>