我推测这是不可能用Flexbox实现的,因为每一行只能是适合其元素所需的最小高度,但这能用较新的CSS网格实现吗?
明确地说,我希望网格中的所有元素在所有行上的高度相等,而不仅仅是每行.基本上,最高的"单元格"应该规定所有单元格的高度,而不仅仅是它所在行的单元格的高度.
我推测这是不可能用Flexbox实现的,因为每一行只能是适合其元素所需的最小高度,但这能用较新的CSS网格实现吗?
明确地说,我希望网格中的所有元素在所有行上的高度相等,而不仅仅是每行.基本上,最高的"单元格"应该规定所有单元格的高度,而不仅仅是它所在行的单元格的高度.
如果目标是创建具有等高行的网格,其中网格中最高的单元格设置所有行的高度,这里有一个快速而简单的解决方案:
grid-auto-rows: 1fr
网格布局提供了用于在网格容器中建立灵活长度的单位.这是fr
台.它旨在分配容器中的空闲空间,有点类似于Flexbox中的flex-grow
属性.
如果将网格容器中的所有行都设置为1fr
,则如下所示:
grid-auto-rows: 1fr;
... 然后所有行的高度都相等.
这完全没有意义,因为fr
应该分配自由空间.如果几行内容的高度不同,那么当空间分布时,一些行会相应地变小变高.
Except,深埋在网格规范中的是这个小金块:
7.2.3. Flexible Lengths: the
fr
unit个...
当可用空间为无穷大时(这发生在栅格 容器的宽度或高度是不确定的),弹性大小(
fr
)的网格轨道 根据它们的内容调整大小,同时保持它们各自的比例.通过确定每个柔性大小的格网轨迹的使用大小来计算其使用的大小 每个弹性大小栅格轨迹的
max-content
个大小并除以 大小由相应的弹性系数确定为"假设的1fr
" 大小".其中的最大值用作解析的
1fr
长度( 挠性分数),然后乘以每个栅格轨迹的挠性 系数以确定其最终大小.
因此,如果我读得正确,当处理动态大小的网格(例如,高度不确定)时,网格轨迹(在本例中为行)的大小取决于其内容.
每行的高度由最高的(max-content
)栅格项目确定.
这些行的最大高度变为1fr
的长度.
这就是1fr
在网格容器中创建等高行的方式.
正如问题中所指出的,使用FlexBox不可能实现等高行.
弹性项可以在同一行上高度相等,但不能跨多行.
此行为在FlexBox等级库中定义:
在多行弹性容器中,每行的交叉大小是容纳该行上的弹性项目所需的最小尺寸.
换句话说,当基于行的弹性容器中有多行时,每行的高度("十字大小")是该行上容纳弹性项所需的最小高度.