CSS网格布局中的等高行

Question

我认为使用Flexbox是不可能实现这一点的，因为每一行只能是适合其元素所需的最小高度，但使用较新的CSS网格可以实现这一点吗？

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

Answer 1

简单的回答是，在网格容器上设置grid-auto-rows:1fr；可以解决所问的问题。

https://codepen.io/hlsg/pen/exkjba

Answer 2

如果目标是创建一个具有相等高度行的网格，其中网格中最高的单元格设置所有行的高度，下面是一个快速而简单的html" target="_blank">解决方案：

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

网格布局提供了在网格容器中建立灵活长度的单元。这是fr单元。它被设计为在容器中分配空闲空间，有点类似于FlexBox中的flex-grow属性。

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

grid-auto-rows: 1fr;

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

因为fr应该分配空闲空间，所以即刻这样做是没有意义的。如果几行内容的高度不同，那么当空间分布时，一些行会按比例变小变高。

但是，在网格规范中有一个小块：

7.2.3.灵活长度:fr单位

...

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

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

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

因此，如果我正确地理解了这一点，当处理动态大小的网格（例如，高度是不确定的）时，网格轨迹（在本例中是行）的大小会根据其内容调整。

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

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

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

正如问题中所指出的，使用FlexBox不可能实现等高行。

柔性项可以在同一行上具有相等的高度，但不能跨多行。

此行为在flexbox规范中定义：

6.弹性行

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

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