了解网格列属性

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

如所述，grid-column: 3 / 4表示网格区域覆盖网格列行三到四.换句话说，它只涵盖了第三列。

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

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

了解网格列属性

Understanding the grid-column property

css

css-grid

了解网格列 属性

Understanding the grid-column property

css

css-grid

了解网格列属性