网格列值 1/1 和 1/2 之间有什么区别？

Question

在 CSS 网格中，grid-column: 1/1并1/2显示相同的结果。它们之间有什么区别吗？看看下面的代码。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
}

.item1 {
  grid-column: 1 / 2;
}

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
</div>

grid-column值1 / 2且 1 / 1相同。有什么不同？

Answer 1

这是因为对什么grid-column: 1 / 2意思的误解。

这并不意味着跨越两列（第一列和第二列）......它意味着元素从网格线1开始并在网格线2结束。

网格跟踪@ MDN

网格轨迹是两条网格线之间的空间。它们是通过使用 grid-template-columns 和 grid-template-rows 属性或速记 grid 或 grid-template 属性在显式网格中定义的。通过将网格项定位在显式网格中创建的轨道之外，还可在隐式网格中创建轨道。

因此，在您的示例中，因为您有 4 列，所以有 5 条显式 网格线（我将排除由隐式网格创建的任何网格线以避免混淆）。

由于第一列始终位于第 1 行和第 2 行之间，因此它仅跨越第一列。

• 第 1 列：第 1 - 2 行
• 第 2 列：第 2 - 3 行
• 第 3 列：第 3 - 4 行
• 第 4 列：第 4 - 5 行

grid-column: 1/1本质上是无效的，所以它重置为它的默认值，即仅跨越第一列。

网格完整指南