我在我的公司做了关于新的CSS网格规范的技术演示,我的经理问我一个非常有趣的问题,我没有一个简单的答案。为什么,当在网格中定位元素时,它们之间的网格线所指的位置,而不是一些识别列和行的固有方法?我知道网格模板区域,但这仍然是你必须自己定义的东西。
基本上,我的问题是:为什么以下示例中的数字引用网格线数而不是网格列数?
grid-column: 1/4;
网格线定义了用于放置网格项和定义网格区域的清晰起点和终点。
假设网格项应从网格线1开始并在网格线4处结束,这表明该项应包含在这些线之间的区域内。假设一个网格项应该从第1列开始并在第4列结束,这一点有点不太清楚:项目是否应该占据第4列?如果没有,则可以使用grid-column: 4
在第4列放置另一个项目,遵循相同的语义。否则,在那里放置一个项目会导致它与第一个项目重叠。
这对于自动放置尤其重要,如果显式网格中没有空间放置其他项目,则可能导致创建新的行和列。 Section 8.5 of the spec包含所有细节。
CSS Grid specification定义了多种在网格容器中对齐和定位项目的方法。它们在名为Placing Grid Items的部分中描述。
关于你的问题:
为什么以下示例中的数字引用网格线编号而不是网格列编号?
grid-column: 1 / 4;
因为放置网格项的特定方法是调用“基于行的放置”,其侧重于网格区域的边界线。
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
做同样的事情,但计算列。
还有其他方法可用。请参阅此处的说明:
以下是上述两种方法的演示:
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>