我认为使用Flexbox是不可能实现的，因为每行只能是适合其元素所需的最小高度，但是可以使用较新的CSS Grid来实现吗？
要清楚，我希望所有行中网格中的所有元素具有相同的高度，而不是每行。基本上，最高的“细胞”应该决定所有细胞的高度，而不仅仅是其行中的细胞。
答案 0 :(得分：106)
如果目标是创建一个高度相等的网格，网格中最高的单元格设置所有行的高度，这是一个快速而简单的解决方案：
grid-auto-rows: 1fr 网格布局提供了一个在网格容器中建立灵活长度的单元。这是fr单位。它旨在分配容器中的可用空间，有点类似于flexbox中的flex-grow属性。
如果您将网格容器中的所有行都设置为1fr，那么就这样说：
grid-auto-rows: 1fr;
...然后所有行都是相等的高度。
因为fr应该分配自由空间，所以它不是真正有意义的。如果多行的内容具有不同的高度，那么当空间分布时，某些行会按比例变小和变高。
除 之外，深埋在网格规格中的是这个小块：
7.2.3. Flexible Lengths: the
frunit...
当可用空间是无限的时（在网格时发生） 容器的宽度或高度是不确定的），弹性大小（
fr）网格轨道 在保持各自比例的同时确定其内容的大小。通过确定来计算每个弹性尺寸网格轨道的使用大小 每个弹性大小的网格轨道的
max-content大小并将其除以 通过相应的弹性因子确定“假设1fr大小”。最大值用作已解决的
1fr长度（ flex fraction），然后乘以每个网格轨道的flex 决定其最终规模的因素。
因此，如果我正确地读取这个，当处理动态大小的网格（例如，高度是不确定的）时，网格轨迹（在这种情况下为行）的大小与其内容相同。
每行的高度由最高（max-content）网格项确定。
这些行的最大高度变为1fr的长度。
这就是1fr在网格容器中创建相等高度行的方式。
如问题中所述，flexbox无法使用相等的高度行。
Flex项目在同一行上可以是相等的高度，但不能跨越多行。
此行为在flexbox规范中定义：
在多行灵活容器中，每行的交叉大小是在行上包含弹性项所需的最小大小。
换句话说，当基于行的Flex容器中有多行时，每行的高度（“交叉大小”）是在行上包含弹性项所需的最小高度。
答案 1 :(得分：10)
简短的回答是在网格容器上设置grid-auto-rows: 1fr;可以解决问题。
答案 2 :(得分：0)
您可以像这样使用grid-template-rows的百分比
grid-template-rows: 50% 50%;