css - 为什么这两条代码给出不同的结果（网格行）？

Question

我试图了解 CSS 网格是如何工作的，但我不明白为什么以下代码会产生不同的结果：

.item20 {
    grid-row-start: 4;
    grid-row: span 3;
}

下一个我认为是速记：

.item20 {
    grid-row: 4 / span 3;
}

我想让这个项目从第 4 行开始，高度为 3 行，但是当我选择第一个代码时结果是不同的。

第一个代码：

第二个代码：

标签： csscss-grid

Answer 1

当您grid-row: span 3;在第一个代码中使用时，它会grid-row-start: 4;用以下值覆盖 ：

grid-row-start: span 3; grid-row-end: auto;

因此，第 20 项从其原始位置向下扩展为 3 行。

所以，为了让它正确，你必须使用grid-row-end: span 3;而不是grid-row: span 3;因为grid-row它本身是grid-row-start和grid-row-end值的简写属性。