我有一个 CSS 网格布局,我想在其中使一些(中间 3 行)拉伸(stretch)到它们的最大尺寸。我可能正在寻找类似于 flex-grow: 1
对 Flexbox 所做的事情的属性,但我似乎找不到解决方案。
Note: This is intended for an Electron app only, so browser compatibility is not really a concern.
我有以下 CSS 网格布局:
.grid {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
grid-gap: 10px;
height: calc(100vh - 10px);
}
.grid .box {
background-color: grey;
}
.grid .box:first-child,
.grid .box:last-child {
grid-column-start: 1;
grid-column-end: -1;
}
/* These rows should 'grow' to the max height available. */
.grid .box:nth-child(n+5):nth-child(-n+7) {
grid-column-start: 1;
grid-column-end: -1;
}
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
创建以下网格:
当所有框都不包含任何内容时,我希望网格看起来像这样:
最佳答案
Related posts 之一给了我(简单的)答案。
显然 grid-template-rows
属性上的 auto
值正是我所寻找的。
.grid {
display:grid;
grid-template-columns: 1fr 1.5fr 1fr;
grid-template-rows: auto auto 1fr 1fr 1fr auto auto;
grid-gap:10px;
height: calc(100vh - 10px);
}
关于html - 如何在 CSS 网格布局中指定行高?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41916722/