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

sou*_*ust 5 css css-grid

我在我的公司做了一个关于新 CSS 网格规范的技术演示,我的经理问了我一个非常有趣的问题,我没有一个简单的答案。为什么在网格中定位元素时,位置是由它们之间的网格线引用的,而不是使用某种固有的方式来识别列和行?我知道 grid-template-areas,但这仍然是你必须自己定义的东西。

本质上,我的问题是:为什么以下示例中的数字指的是网格线号而不是网格列号?

grid-column: 1/4;
Run Code Online (Sandbox Code Playgroud)

Bol*_*ock 1

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

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

这对于自动放置尤其重要,如果显式网格中没有空间来放置其他项目,则可能会导致创建新的行和列。规范第 8.5 节包含所有详细信息。

  • 但与前端开发中的任何事情一样,如果浏览器制造商可以达成一致的标准,我们就会遵循它。诸如“该项目是否应该占据第 4 列?”之类的问题 自然就按照这样的标准来解决。我的问题是为什么它不是标准? (2认同)