css - 为什么通过网格线而不是行/列号将元素定位在 css 网格上?

标签 css css-grid

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

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

grid-column: 1/4;

最佳答案

网格线为放置网格项和定义网格区域定义了明确的起点和终点。

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

这对于自动放置尤为重要,如果显式网格中没有空间放置其他元素,这可能会导致创建 行和列。 Section 8.5 of the spec包含所有详细信息。

关于css - 为什么通过网格线而不是行/列号将元素定位在 css 网格上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47852037/

相关文章:

html - 最大宽度为 100% 的 CSS 网格 minmax()

css - 边缘问题 : height 100% in CSS grid cell getting value of 100% width

php - 浏览器将提示下载本地 PHP 文件而不是显示 HTML/CSS 内容

javascript - HTML 表单 POST 到直接打印页面

html - 在 flexbox 中,如何将 2 个元素排成一行,将 2 个元素排成一列?

html - 如何根据CSS中元素的数量改变元素的排列?

CSS 网格 : centering and overlapping difficulties

html - 平等过渡

html - 垂直对齐 img 奇怪的行为

html - 使用 CSS 网格布局跨越所有列/行的元素