Question

是否可以设置div应该跨越的行/列数量的高度和宽度，而不是确切地指定它们应该进入哪些列或行？

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

我的具体用例涉及Angular 5，我正在动态加载对象，并希望使其中一些比其他更大。我知道我可以使用flexbox并设置高度来做到这一点，但很想知道我是否可以用网格实现相同（更整洁），但我发现所有类都使用.wide和之类的。

Answer 1

网格行和网格列的替代语法设置范围：

.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 grid子元素的大小，而不指定它应该进入的列或行

1 个答案: