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

>将容器设置为grid-auto-rows：1fr

怎么运行的

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

如果将网格容器中的所有行设置为1fr，那么就像这样说：

grid-auto-rows: 1fr;

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

它不是真正有意义的，因为fr应该分配自由空间。如果多行具有不同高度的内容，则当分布空间时，某些行将按比例变小和变高。

除此之外，深埋在网格规格中的是这个小金块：

07001

…

When the available space is infinite (which happens when the grid
container’s width or height is indefinite),flex-sized (fr) grid tracks are
sized to their contents while retaining their respective proportions.

The used size of each flex-sized grid track is computed by determining
the max-content size of each flex-sized grid track and dividing that
size by the respective flex factor to determine a “hypothetical 1fr
size”.

The maximum of those is used as the resolved 1fr length (the
flex fraction),which is then multiplied by each grid track’s flex
factor to determine its final size.

因此，如果我正确地读取这个，当处理动态大小的网格(例如，高度是不确定的)时，网格轨道(在这种情况下为行)的大小适合于它们的内容。

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

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

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

为什么不选择flexBox

如问题中所述，flexBox不能使用相同高度的行。

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

此行为在flexBox规范中定义：

07003

In a multi-line flex container,the cross size of each line is the minimum size necessary to contain the flex items on the line.

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