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

Question

是否可以将 div 的高度和宽度设置为 rows/columns 它们应该跨越的数量，而不具体指定它们应该进入哪些列或行？

例如，如果我有两个 class，比如 .long 和 .wide，我希望 .long class 为 3 行高，1 列宽，.wide class 是 3 列宽但只有 1 行高。

我的具体用例涉及 Angular 5，我正在动态加载对象，并想让其中一些比其他的大。我知道我可以使用 flexboxes 和设置高度来做到这一点，但很想知道我是否可以用网格实现相同的（更整洁），但我一直在寻找的所有 class 都用 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>

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

Set css grid child element's size on the grid, without specifying what column or row it should go into

css

grid-layout

css-grid