CSS 网格布局中的等高行 [英] Equal height rows in CSS Grid Layout
问题描述
我认为使用 Flexbox 无法实现这一点，因为每一行只能是适合其元素所需的最小高度，但是使用较新的 CSS Grid 可以实现这一点吗?
I gather that this is impossible to achieve using Flexbox, as each row can only be the minimal height required to fit its elements, but can this be achieved using the newer CSS Grid?
明确地说，我希望网格中所有行的所有元素的高度相等，而不仅仅是每一行.基本上，最高的单元格"应该决定所有单元格的高度，而不仅仅是其行中的单元格.
To be clear, I want equal height for all elements in a grid across all rows, not just per each row. Basically, the highest "cell" should dictate the height of all cells, not just the cells in its row.
推荐答案
简答
如果目标是创建一个行高相等的网格，其中网格中最高的单元格设置所有行的高度，这里有一个快速而简单的解决方案:
Short Answer
If the goal is to create a grid with equal height rows, where the tallest cell in the grid sets the height for all rows, here's a quick and simple solution:
- 将容器设置为
grid-auto-rows: 1fr
网格布局提供了在网格容器中建立灵活长度的单元.这是fr 单位.它旨在分配容器中的可用空间，有点类似于 flexbox 中的 flex-grow 属性.
Grid Layout provides a unit for establishing flexible lengths in a grid container. This is the fr unit. It is designed to distribute free space in the container and is somewhat analogous to the flex-grow property in flexbox.
如果您将网格容器中的所有行设置为 1fr，我们可以这样说:
If you set all rows in a grid container to 1fr, let's say like this:
grid-auto-rows: 1fr;
...那么所有行的高度将相等.
... then all rows will be equal height.
立即使用并没有什么意义，因为 fr 应该分配可用空间.而如果几行内容的高度不同，那么当空间分布时，一些行会成比例地变小和变高.
It doesn't really make sense off-the-bat because fr is supposed to distribute free space. And if several rows have content with different heights, then when the space is distributed, some rows would be proportionally smaller and taller.
除了，深埋在网格规范中的是这个小金块:
Except, buried deep in the grid spec is this little nugget:
...
当可用空间无限时(当网格容器的宽度或高度是不确定的)，flex-sized (fr) 网格轨道是根据内容调整大小，同时保持各自的比例.
When the available space is infinite (which happens when the grid
container’s width or height is indefinite), flex-sized (fr) grid tracks are
sized to their contents while retaining their respective proportions.
每个 flex-sized 网格轨道的使用大小是通过确定每个 flex-sized 网格轨道的 max-content 大小并划分它通过相应的弹性系数确定假设的 1fr大小".
The used size of each flex-sized grid track is computed by determining
the max-content size of each flex-sized grid track and dividing that
size by the respective flex factor to determine a "hypothetical 1fr
size".
其中的最大值用作解析的 1fr 长度(flex 分数)，然后乘以每个网格轨道的 flex决定其最终尺寸的因素.
The maximum of those is used as the resolved 1fr length (the
flex fraction), which is then multiplied by each grid track’s flex
factor to determine its final size.
所以，如果我没看错的话，在处理动态大小的网格(例如，高度不确定)时，网格轨道(在这种情况下，行)的大小会与其内容相符.
So, if I'm reading this correctly, when dealing with a dynamically-sized grid (e.g., the height is indefinite), grid tracks (rows, in this case) are sized to their contents.
每行的高度由最高的决定(max-content) 网格项.
The height of each row is determined by the tallest (max-content) grid item.
那些行的最大高度变成了1fr的长度.
The maximum height of those rows becomes the length of 1fr.
这就是 1fr 在网格容器中创建等高行的方式.
That's how 1fr creates equal height rows in a grid container.
如问题中所述，flexbox 无法实现等高的行.
As noted in the question, equal height rows are not possible with flexbox.
Flex 项目可以在同一行上具有相同的高度，但不能跨多行.
Flex items can be equal height on the same row, but not across multiple rows.
此行为在 flexbox 规范中定义:
This behavior is defined in the flexbox spec:
在多行 flex 容器中，每行的交叉大小是包含行上的 flex 项目所需的最小大小.
In a multi-line flex container, the cross size of each line is the minimum size necessary to contain the flex items on the line.
换句话说，当基于行的弹性容器中有多行时，每行的高度(交叉尺寸")是包含行上弹性项目所需的最小高度.
In other words, when there are multiple lines in a row-based flex container, the height of each line (the "cross size") is the minimum height necessary to contain the flex items on the line.
这篇关于CSS 网格布局中的等高行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
