为什么通过网格线而不是行/列号来定位css网格上的项目？

Question

我在我的公司做了关于新的CSS网格规范的技术演示，我的经理问我一个非常有趣的问题，我没有一个简单的答案。为什么，当在网格中定位元素时，它们之间的网格线所指的位置，而不是一些识别列和行的固有方法？我知道网格模板区域，但这仍然是你必须自己定义的东西。

基本上，我的问题是：为什么以下示例中的数字引用网格线数而不是网格列数？

grid-column: 1/4;

Answer 1

网格线定义了用于放置网格项和定义网格区域的清晰起点和终点。

假设网格项应从网格线1开始并在网格线4处结束，这表明该项应包含在这些线之间的区域内。假设一个网格项应该从第1列开始并在第4列结束，这一点有点不太清楚：项目是否应该占据第4列？如果没有，则可以使用grid-column: 4在第4列放置另一个项目，遵循相同的语义。否则，在那里放置一个项目会导致它与第一个项目重叠。

这对于自动放置尤其重要，如果显式网格中没有空间放置其他项目，则可能导致创建新的行和列。 Section 8.5 of the spec包含所有细节。

Answer 2

CSS Grid specification定义了多种在网格容器中对齐和定位项目的方法。它们在名为Placing Grid Items的部分中描述。

关于你的问题：

为什么以下示例中的数字引用网格线编号而不是网格列编号？

grid-column: 1 / 4;

因为放置网格项的特定方法是调用“基于行的放置”，其侧重于网格区域的边界线。

Line-based Placement

grid-row-start，grid-column-start，grid-row-end和grid-column-end属性通过为其网格放置提供线，跨度或任何（自动）来确定网格项在网格中的大小和位置，从而指定内联开始，块开始，内联-end，以及网格区域的块端边缘。

（“inline-start”是文本开始的一侧。它是LTR的左侧。“block-start”是水平书写模式中的顶部。“ - end”指的是相反的一面.source）

如果您希望规则计算列/行而不是行，请使用span关键字。

鉴于：

grid-column: 1 / 4

创建一个从第1行开始到第4行结束的网格区域（即第1,2和3列）......

grid-column: 1 / span 3

做同样的事情，但计算列。

还有其他方法可用。请参阅此处的说明：

• https://www.w3.org/TR/css3-grid-layout/#placement

以下是上述两种方法的演示：

article {
  display: grid;
  grid-template-columns: repeat(12, 75px);
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

section:nth-child(1) {
  grid-column: 1 / 4;
  grid-row: 1;
}

section:nth-child(2) {
  grid-column: 1 / span 3;
  grid-row: 2;
}

/* non-essential demo styles */
section {
  background-color: lightgreen;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

<article>
  <section><code>grid-column: 1 / 4<br>counts lines</code></section>
  <section><code>grid-column: 1 / span 3<br>counts columns</code></section>
  <section>3</section>
  <section>4</section>
  <section>5</section>
</article>