简答

如果目标是创建一个等高行的网格，其中网格中最高的单元格设置所有行的高度，这里有一个快速简单的解决方案：

• 将容器设置为 grid-auto-rows: 1fr

这个怎么运作

网格布局提供了一个用于在网格容器中建立灵活长度的单元。这是 fr 单位。它旨在分配容器中的可用空间，有点类似于flex-growflexbox 中的属性。

如果您将网格容器中的所有行设置为1fr，我们可以这样说：

grid-auto-rows: 1fr;

…然后所有行的高度都相同。

它实际上没有意义，因为fr它应该分配可用空间。如果几行内容的高度不同，那么当空间分布时，一些行会按比例变小和变高。

除了 ，深埋在网格规范中的是这个小金块：

7.2.3. 灵活的长度：fr 单位

…

当可用空间是无限的（当网格容器的宽度或高度不确定时会发生这种情况），flex-sized ( fr)
网格轨道的大小会根据它们的内容调整大小，同时保持它们各自的比例。

每个弹性大小的网格轨道的使用大小是通过确定max- content每个弹性大小的网格轨道的大小并将该大小除以相应的弹性因子以确定“假设大小”来计算的1fr 。

这些中的最大值用作解析1fr长度（弯曲分数），然后乘以每个网格轨道的弯曲因子以确定其最终大小。

所以，如果我没看错的话，在处理动态大小的网格（例如，高度是不确定的）时，网格轨道（在这种情况下是行）的大小会根据它们的内容进行调整。

每行的高度由最高的 ( max-content) 网格项确定。

这些行的最大高度变为 的长度1fr。

这就是1fr在网格容器中创建等高行的方式。

为什么 flexbox 不是一个选项

如问题中所述，使用 flexbox 不可能实现相等高度的行。

Flex 项目在同一行上的高度可以相同，但不能跨多行。

这种行为在 flexbox 规范中定义：

6. 弯曲线

在多行 flex 容器中，每行的交叉大小是包含该行上的 flex 项所需的最小大小。

换句话说，当基于行的弹性容器中有多行时，每行的高度（“交叉大小”）是包含该行上的弹性项目所需的最小高度。