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

Question

我有一个CSS Grid布局，我想让其中的一些（中间3个）行拉伸到它们的最大大小。我可能正在寻找类似于Flexbox中flex-grow: 1的属性，但我似乎找不到解决方案。

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

我有以下CSS Grid布局：

.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>

这将创建以下网格：

当所有方框都没有内容时，我希望网格看起来像这样：

- Chris

---

我应该说明这仅适用于Electron应用程序，因此浏览器兼容性并不是真正的问题。 - Chris

我正在开发一个 Electron 应用，其中有一个视图是类似于上面的网格。因为它是一个网格，所以我想玩一下新的 CSS Grid Layout，因为在 Electron 中它（有点）被支持。 - Chris

对于 CSS Grid 我还比较新手，尽管 fr 单位很不错，但实际上 auto 才是解决我的问题的关键。 - Astronaut

Answer 1

其中的一个相关帖子给了我（简单的）答案。

显然，在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);
}

- Chris

---

calc() 调用中的 10px 有什么意义？ - John Karahalis

@JohnKarahalis 为了补偿行之间的10像素grid-gap。 - DannyMeister

@DannyMeister，这并不是很有意义，因为行数是动态的，但他只减去了10px，这相当于两行之间的间隙。 - kano

我猜不是为了补偿，而可能是为了使网格周围的上下空间为5px，这样每行周围就有一个均匀的5px（未折叠）边距，因为grid-gap仅适用于网格元素之间。在全屏应用程序中，通过减少grid-gap或2grid-gap的高度来调整味道似乎相当普遍。我更喜欢2grid-gap，因此周围的空白与内部相同。 - DannyMeister

这实际上也是我的解决方案。我有一些行想要隐藏（使用display: none），但即使在这些单元格上设置了display: none，空间仍然不会折叠。结果发现我必须确保在这些特定的行上使用auto并在单元格本身中设置height。不用说，它正好按照预期工作。谢谢！ - Igor

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>

- Gass

---

只为那张纸的美感而点赞。 - saida lachgar

Answer 3

使用 repeat 和 grid

如果一个盒子并不包含任何内容，且您想要同时消除空白的盒子间距，那么您可以使用以下方法。

grid-template-rows: repeat(2, auto) repeat(3, 1fr) repeat(2, 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);
}

- LearningIsNever EndingProcess

Answer 4

.periodic-table {
  display: grid;
  grid-template-columns: repeat(18, 60px);
  grid-template-rows: repeat(7, 70px) 40px repeat(2, 70px);
  grid-gap: 2px;
}

这段代码将创建18列，每列都是60px宽，以及7行高为70px的表格。第8行高度为40px，然后第9和第10行再次设置为70px。

- Tawhid Monowar