在网格上设置 css grid 子元素的大小，而不指定它应该进入的列或行

Question

是否可以在它们应该跨越的行/列数量中设置 div 的高度和宽度，而没有具体指定它们应该进入哪些列或行？

例如，如果我有两个类，比如说.long和.wide，并且我希望.long该类为 3 行高和 1 列宽，并且.wide该类为 3 列宽但只有 1 行高。

我的特定用例涉及 Angular 5，我正在动态加载对象，并希望其中的一些比其他的大。我知道我可以使用 flexboxes 并设置高度来做到这一点，但是很想知道我是否可以用网格实现相同的（更整洁），但我一直在发现每个类都指定了grid-column: x/y; grid-row: a/b等等。

Answer 1

grid-row 和 grid-column 有另一种设置span 的语法：

.grid {
    display: grid;
    border: solid 1px black;
    grid-auto-rows: 30px;
    grid-auto-columns: repeat (5, 50px);
    grid-gap: 5px;
}

.grid div {
    background-color: lightgreen;
}

.wide {
    grid-column: span 3;
}

.long {
    grid-row: span 3;
}

<div class="grid">
<div></div>
<div class="long">LONG</div>
<div class="wide">WIDE</div>
</div>