CSS网格布局中的等高行

我认为使用Flexbox无法实现这一点，因为每一行只能是适合其元素的最小高度，但是可以使用更新的CSS Grid来实现吗？

明确地说，我希望网格中所有行的所有元素的高度相等，而不仅仅是每行的高度都相等。基本上，最高的“单元格”应规定所有单元格的高度，而不仅仅是其行中的单元格。

简短答案

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

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

这个怎么运作

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

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

grid-auto-rows: 1fr;

...那么所有行的高度将相等。

fr即时分配并没有实际意义，因为应该分配自由空间。而且，如果几行内容的高度不同，那么当空间分布时，某些行将成比例地变小和变高。

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

7.2.3。弹性长度：fr 单位

...

当可用空间无限时（在网格容器的宽度或高度不确定时发生），可伸缩尺寸（fr）的网格轨道将根据其内容调整大小，同时保留其各自的比例。

通过确定max-content每个挠性尺寸的网格轨道的尺寸并将该尺寸除以各自的挠性因子以确定“假设1fr 尺寸” ，来计算每个挠性尺寸的网格轨道的使用尺寸。

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

因此，如果我正确地阅读了此内容，则在处理动态尺寸的网格（例如，高度不确定）时，网格轨迹（在这种情况下，行）的大小应与其内容相匹配。

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

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

这样便1fr可以在网格容器中创建等高的行。

为什么Flexbox不可行

正如问题所指出的，flexbox无法实现相等高度的行。

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

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

6.伸缩线

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

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

简短的答案是，grid-auto-rows: 1fr;在网格容器上进行设置可以解决所要求的问题。

https://codepen.io/Hlsg/pen/EXKJba