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

【问题标题】：Why are my template areas not stacking as I expect?为什么我的模板区域没有按预期堆叠？
【发布时间】：2019-08-14 22:43:37
【问题描述】：

使用以下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。或者这是避免元素堆叠成一行的唯一方法？

【问题讨论】：

标签： html css alignment css-grid

【解决方案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>

【讨论】：