时间戳

首页 > 解决方案 > 为什么我的模板区域没有按预期堆叠？

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

问题描述

使用以下 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 个蓝色）：

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

标签： htmlcssalignmentcss-grid

解决方案

请注意，这里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>

推荐阅读