CSS网格布局中的等高行

问题描述 投票:58回答:3

我认为使用Flexbox是不可能实现的,因为每行只能是适合其元素所需的最小高度,但是可以使用较新的CSS Grid实现吗?

为了清楚起见,我希望所有行中网格中的所有元素具有相同的高度,而不是每行。基本上,最高的“细胞”应该决定所有细胞的高度,而不仅仅是其行中的细胞。

css css3 flexbox grid-layout css-grid
3个回答
113
投票

简答

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

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

这个怎么运作

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

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

grid-auto-rows: 1fr;

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

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

除了,深埋在网格规格中的是这个小金块:

7.2.3. Flexible Lengths: the fr unit

...

当可用空间是无限的(当网格容器的宽度或高度不确定时发生),弹性大小(fr)网格轨道的大小与其内容相同,同时保留其各自的比例。

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

最大值用作解析的1fr长度(弯曲部分),然后乘以每个网格轨迹的弯曲因子以确定其最终尺寸。

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

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

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

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


为什么不选择flexbox

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

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

此行为在flexbox规范中定义:

6. Flex Lines

在多行灵活容器中,每行的交叉大小是在行上包含弹性项所需的最小大小。

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


10
投票

简短的回答是在网格容器上设置grid-auto-rows: 1fr;解决了问题。

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


0
投票

您可以像这样使用grid-template-rows的百分比

grid-template-rows: 50% 50%;
© www.soinside.com 2019 - 2024. All rights reserved.