如何在 CSS Grid 布局中指定行高？答案

【问题标题】：How do I specify row heights in CSS Grid layout?如何在 CSS Grid 布局中指定行高？
【发布时间】：2017-06-14 11:28:10
【问题描述】：

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

注意：这仅适用于 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>

这将创建以下网格：

当没有一个框包含任何内容时，我希望网格看起来像这样：

【问题讨论】：

你为什么不想使用 flexbox？ display: grid; 的浏览器支持比 display: flex; 差
我应该说这仅适用于 Electron 应用程序，因此浏览器兼容性并不是真正的问题。
我正在构建的 Electron 应用程序有 1 个视图，即上面的网格。由于它是一个网格，我认为使用新的 CSS 网格布局会很有趣，因为它（有点）在 Electron 中得到支持。
还是 CSS 网格的新手，fr 单元很好，但确实 auto 也是解决我的问题的关键

标签： html css grid-layout css-grid

【解决方案1】：

其中一个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);
}

【讨论】：

此外，随着时间的推移，现在每个主流浏览器都支持 CSS 网格。
10px在calc()调用中有什么意义？
@JohnKarahalis 补偿行之间的 10px grid-gap。
@DannyMeister 这并没有什么意义，因为行数是动态的，但他只减去 10px，这等于 2 行之间的差距。?
好吧，我猜不是补偿，但可能使网格周围的上下空间为 5px，这使得每行周围的边距均匀 5px（未折叠），因为 grid-gap 仅适用于元素之间网格。在我见过的全屏应用程序中，通过 grid-gap 或 2*grid-gap 来降低高度似乎相当普遍。我更喜欢 2*grid-gap 所以周围的空白与内部相同。

【解决方案2】：

使用网格重复

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

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

【讨论】：