将网格行设置为跨度2时，为什么我的网格行跨度为1行？

Question

在以下代码中我有一个与网格行和跨度有关的问题：

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.item {
  padding: 3rem;
  border: 1px solid #ccc;
  background: #f4f4f4;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
}

.item:first-child {
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
  background: blueviolet;
}

.item:nth-child(9) {
  grid-column: 2 / span 3;
  grid-row: 2 / span 2;
  background: red;
}

<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
  <div class="item">Item 11</div>
  <div class="item">Item 12</div>
  <div class="item">Item 13</div>
  <div class="item">Item 14</div>
  <div class="item">Item 15</div>
</div>

这是输出吗？：

正如我们在输出屏幕截图中看到的那样，Item1仅跨越1行，item 9仅跨越1行，但是在CSS样式中，我为item1和item9提供了2的行跨度。有人可以解释原因吗？

Answer 1

首先是背景。

您没有定义明确的行。网格中的所有行都是隐式的。

根据规范：

§ 7.1. The Explicit Grid

三个属性grid-template-rows，grid-template-columns， 和grid-template-areas一起定义网格的显式网格 容器。

换句话说，因为您没有使用grid-template-rows或grid-template-areas，所以网格没有定义的行（即，显式行），并且根据需要创建了行（即，隐式行）

从上面的规范部分继续：

由于网格项目放置在最终网格的上方，最终网格可能会变大 显式网格；在这种情况下，将创建隐式轨道，这些 隐式轨道的大小将由grid-auto-rows和 grid-auto-columns个属性。

好的，但是span 2为什么不将网格区域扩展到两行？

实际上是。

---

答案

网格规范中有一条规则，指示浏览器在grid-template-columns，grid-template-rows和grid-template-areas不存在的情况下始终在相关轴上创建一条网格线。

再次从第7.1节开始。以上：

如果这些属性未定义任何显式轨迹，则显式网格 每个轴上仍然包含一条网格线。

因此，仔细查看您的网格（在这种情况下，使用Firefox's Inspector tool）将显示span 2正常工作，但是已经创建了一条额外的线，因此它似乎只失败。

请注意第2行和第3行的叠加方式。

一个简单的解决方法是为隐式行定义高度。这将覆盖默认的auto高度，这将导致该行在为空时完全折叠。

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 50px; /* new */
}

.item {
  padding: 3rem;
  border: 1px solid #ccc;
  background: #f4f4f4;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
}

.item:first-child {
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
  background: blueviolet;
}

.item:nth-child(9) {
  grid-column: 2 / span 3;
  grid-row: 2 / span 2;
  background: red;
}

<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
  <div class="item">Item 11</div>
  <div class="item">Item 12</div>
  <div class="item">Item 13</div>
  <div class="item">Item 14</div>
  <div class="item">Item 15</div>
</div>

Answer 2

在您的df = df.melt(id_vars = [*df.columns[-546:]])样式块中，您需要包括一个明确的.grid样式声明。

一旦grid-template-rows 明确地包含多行，您的项目1 和项目9 的样式就会起作用。

例如

.grid

或者，正如 @Paulie_D 所建议的：

grid-template-rows: 1fr 1fr;

---

工作示例：

grid-template-rows: minmax(0, 1fr);

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
}

.item {
  padding: 3rem;
  border: 1px solid #ccc;
  background: #f4f4f4;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
}

.item:first-child {
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
  background: blueviolet;
}

.item:nth-child(9) {
  grid-column: 2 / span 3;
  grid-row: 2 / span 2;
  background: red;
}