我推测这是不可能用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不可能实现等高行.

弹性项可以在同一行上高度相等,但不能跨多行.

此行为在FlexBox等级库中定义:

6. Flex Lines

在多行弹性容器中,每行的交叉大小是容纳该行上的弹性项目所需的最小尺寸.

换句话说,当基于行的弹性容器中有多行时,每行的高度("十字大小")是该行上容纳弹性项所需的最小高度.

Css相关问答推荐

将CSS更改为Mat-Form-Field,其中包含搜索框

尽管 URL 路径正确,但背景图像未显示

CSS关键帧中使用transform-origin存在问题的解决方案

动态覆盖 Vuetify 类

在 WooCommerce 变体 Select 中转换属性文本以大写

我无法在 next.js 应用程序中传播 daisyui 的主题

整个列的 CSS Grid Margin Top

为什么过渡属性不适用于 box-shadow?

子组件的css会影响整个页面

CSS3 - RotateY() 居中

你可以在 CSS 中扩展实体(entity)吗?

在 IE9-10 中压缩 SVG 的背景大小

创建 CSS 全局变量:样式表主题管理

CSS - 在 id 中 Select 类的语法

如何在 Firefox 和 Opera 中zoom HTML 元素?

使用自定义 CSS 在 WebView 中呈现 HTML

:last-child 没有按预期工作?

为什么我的 div 边距重叠,我该如何解决?

CSS:悬停一个元素,多个元素的效果?

以不同的方式设置表格的第一个 列