如何在CSS网格布局中指定行高？

Question

我有一个CSS网格布局,我想让一些(中间3)行拉伸到它们的最大尺寸.我可能正在寻找类似于flex-grow: 1Flexbox 的属性,但我似乎无法找到解决方案.

注意:这仅适用于Electron应用程序,因此浏览器兼容性并不是真正的问题.

我有以下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>

这会创建以下网格:

当没有任何框包含任何内容时,我希望网格看起来像这样:

Answer 1

其中一篇相关帖子给了我(简单)答案.

显然,物业的auto价值grid-template-rows完全符合我的要求.

.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);
}

Answer 2

还需要指定元素的最小高度，否则如果它们没有内容，它们就会消失。

:root{
  --body-margin:10px;
}
body{
  margin:var(--body-margin);
}
.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 - calc(2 * var(--body-margin)));
}
.grid div{
  min-height:20px;
  background-color: grey;
}
.grid 
  div:nth-child(n+5):nth-child(-n+7),
  div:first-child,
  div:last-child{
    grid-column-start: 1;
    grid-column-end: -1;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 3

使用带有网格的重复

当盒子不包含任何内容并且如果您还想摆脱空盒子空间时，可以使用以下内容。

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

或者更紧凑的语法，因为如果未定义，最后两个单元格大小将默认为 auto：

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

如果您在任何情况下都需要一些空间，则可以使用：

grid-template-rows: repeat(2, 10px) repeat(3, 1fr) repeat(2, 10px);

最后CSS将是

.grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: repeat(2, auto) repeat(3, 1fr);
  grid-gap: 10px;
  height: calc(100vh - 10px);
}