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

问题描述 投票:3回答:2

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

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

grid-column: 1/4;
css css3 css-grid
2个回答
1
投票

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

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

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


0
投票

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

关于你的问题:

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

grid-column: 1 / 4;

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

Line-based Placement

grid-row-startgrid-column-startgrid-row-endgrid-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

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

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

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

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>
© www.soinside.com 2019 - 2024. All rights reserved.