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-sized(fr)网格轨道的大小与其内容相同,同时保留其各自的比例.

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

这些中的最大值用作分辨1fr长度(弯曲分数),然后乘以每个网格轨迹的弯曲因子以确定其最终尺寸.

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

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

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

这就是如何1fr在网格容器中创建相等的高度行.

为什么不选择flexbox

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

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

此行为在flexbox规范中定义:

6.弹性线

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

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

Answer 2

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

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