我认为使用Flexbox是不可能实现的,因为每行只能是适合其元素所需的最小高度,但是可以使用较新的CSS Grid实现吗?
为了清楚起见,我希望所有行中网格中的所有元素具有相同的高度,而不是每行。基本上,最高的“细胞”应该决定所有细胞的高度,而不仅仅是其行中的细胞。
如果目标是创建一个高度相等的网格,网格中最高的单元格设置所有行的高度,这是一个快速而简单的解决方案:
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不能使用相同高度的行。
Flex项目在同一行上可以是相等的高度,但不能跨越多行。
此行为在flexbox规范中定义:
在多行灵活容器中,每行的交叉大小是在行上包含弹性项所需的最小大小。
换句话说,当基于行的Flex容器中有多行时,每行的高度(“交叉大小”)是在行上包含弹性项所需的最小高度。
简短的回答是在网格容器上设置grid-auto-rows: 1fr;
解决了问题。
您可以像这样使用grid-template-rows
的百分比
grid-template-rows: 50% 50%;