了解网格列属性

Question

我最近回答了一个关于CSS网格的问题。

但是在我的回答中，我使用了一种有效的风格，但我反对的是标准方式。

请看下面的代码段。

红色单元格有这种风格：

grid-column: 3 / 4;

.grid {
  width: 200px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 50px;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-auto-flow: dense;
}

.cell {
  background: tomato;
  width: 100%;
  height: 100%;
}

.cell:nth-child(10n + 1) {
  background: red;
  grid-column: 3 / 4;  
  grid-row: span 2;
}


.cell:nth-child(10n + 1):hover {
  grid-column: 3 / 5;  /* strange behaviour */
}

.cell:nth-child(10n + 2),
.cell:nth-child(10n + 4) {
  background: papayawhip;
  grid-column: 2;

}

.cell:nth-child(10n + 6),
.cell:nth-child(10n + 8) {
  background: yellowgreen;
  grid-column: 4;
}

.cell:nth-child(10n + 7),
.cell:nth-child(10n + 9) {
  background: yellow;
  grid-column: 3;
}

.cell:nth-child(10n + 10) {
  background: lightblue;
  grid-column: 1 / 3;    /* strange behaviour */
  grid-row: span 2;

}

<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>
  <div class="cell">13</div>
  <div class="cell">14</div>
  <div class="cell">15</div>
  <div class="cell">16</div>
  <div class="cell">17</div>
  <div class="cell">18</div>
  <div class="cell">19</div>
  <div class="cell">20</div>
  <div class="cell">21</div>
  <div class="cell">22</div>
  <div class="cell">23</div>
</div>

但未能进入第4栏。

然而，我将它悬停在风格

上

grid-column: 3 / 5;

将扩展到第4列

我认为这是一个错误，但Chrome和FF是一致的。

所以，必须有一些我不理解的东西。

Answer 1

这只是对grid-column属性值的含义的误解。

网格由线分隔。 grid-column: 3 / 4;表示此项目从第三行开始，到第四行结束。这并不意味着该项目将跨越第三和第四列。我在下面的代码片段中用相应的计数器快速显示了行。

.grid {
  width: 200px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 50px;
  grid-column-gap: 0px;
  counter-reset: count;
}

.cell {
  position: relative;
  background: lightgrey;
  border-left: 3px solid orange;
}

.cell:last-child {
  border-right: 3px solid orange;
}

.cell:before {
  counter-increment: count;
  content: counter(count);
}

.cell:last-child:after {
  position: absolute;
  right: 0;
  counter-increment: count;
  content: counter(count);
}

<p>Setting <code>grid-column: 3 / 5;</code> on a cell will make this cell span from the third orange line to the fifth.</p>

<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

Answer 2

如another answer中所述，grid-column: 3 / 4表示网格区域包含三到四个网格列 行 。换句话说，它仅涵盖第三列。

您显然认为此规则将涵盖网格 列 三和四。实际上，这在网格中也是可能的：

• grid-column: 3 / span 2
• grid-column: 3 / 5

请记住，在四列网格中，有五个网格列线。实际上，在每个网格中，列/行的数量等于列数/行数+ 1，因为最后一列/行有一条额外的（最终）行。

Firefox为查看此内容提供了一个有用的工具。

在Firefox开发工具中，当您检查网格容器时，CSS声明中有一个微小的网格图标。单击它会显示网格的轮廓。

此处有更多详情：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts