CSS网格，一些元素跨越行，另一些元素跨越列

Question

对于这个代码笔中显示的项目，我希望"芒果"；从最上面一直延伸到最下面。

自

.orange {
grid-column: 1 / 3;
}

为橙色元素工作。我以为

.mango {
grid-row: 1 / 2;
grid-column: 3
}

会起作用，但没有效果。为什么grid-row不起作用？我还尝试为.fruit-box设置网格流。

Answer 1

这里似乎有3行。试试这个：

.mango {
background: yellow;
grid-column: 3;
grid-row: 1/3; /* FROM 1 to 3 */
}

如果你使用：

grid-template-columns: repeat(3, 2fr);
grid-template-rows: repeat(2, 2fr);

要建立网格，您可以使用-1将单元格扩展到最后一行(无论您可能有多少行(，如下所示：

.mango {
background: yellow;
grid-row: 1/-1; /* from 1 to the end */
}