网格列值 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

网格规范中解释了差异：

8.3.1. Grid Placement Conflict Handling

如果起始行等于结束行，则删除结束行。

好的，那么当结束行被删除时会发生什么？

计算为auto。

8.4. Placement Shorthands: the grid-column, grid-row, and grid-area properties

如果指定了两个<grid-line> 值，则grid-row-start / grid-column-start longhand 设置为斜线之前的值，并且 grid-row-end / grid-column-end 的长记号设置为值 在斜线之后。

当第二个值被省略时，如果第一个值是 <custom-ident>，grid-row-end / grid-column-end 的简写是 也设置为<custom-ident>；否则，设置为auto。

值auto means span 1。

<custom-ident> 是作者定义的标识符，在 Grid 中，指的是 named grid areas，如下所示：

#grid {
 display: grid;
 grid-template-columns: [first nav-start] 150px [main-start] 1fr [last];
 grid-template-rows: [first header-start] 50px [main-start] 1fr [footer-start] 50px [last];
}

由于您的代码中没有命名的网格区域，所以grid-column 结束行解析为auto。

因此，下面的规则都是一样的：

• grid-column: 1 / 2
• grid-column: 1 / 1
• grid-column: 1 / auto
• grid-column: 1

Answer 2

这是因为误解了grid-column: 1 / 2 的含义。

这并不意味着跨越两列（第一列和第二列）...它意味着元素 开始 在 grid-line 1 并在 grid-行 2.

Grid Track @ MDN

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

所以在你的例子中，因为你有 4 列，所以有 5 个 explicit grid-lines（我将排除由隐式网格创建的任何网格线避免混淆）。

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

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

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

A Complete Guide to Grid