CSS网格布局中的等高行

Question

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

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

Answer 1

简短答案

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

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

怎么运行的

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

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

grid-auto-rows: 1fr;

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

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

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

7.2.3。 弹性长度：fr 单位

…

如果可用空间是无限的（当网格容器的宽度或高度不确定时会发生这种情况），则将以flex-
size（fr）网格轨道的大小为其内容调整大小，同时保留其各自的比例。

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

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

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

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

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

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

为什么Flexbox不可行

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

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

此行为在flexbox规范中定义：

6.伸缩线

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

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