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

Question

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

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

我认为下一个是 shorthand:

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

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

第一个代码：

第二个代码：

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 本身就是 shorthand 属性 for [=16] =] 和 grid-row-end 值。