CSS 网格布局中的等高行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44488357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Equal height rows in CSS Grid Layout
提问by Hlsg
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?
我认为使用 Flexbox 无法实现这一点，因为每行只能是适合其元素所需的最小高度，但这可以使用较新的 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.
需要明确的是，我希望所有行中网格中所有元素的高度相等，而不仅仅是每一行。基本上，最高的“单元格”应该决定所有单元格的高度，而不仅仅是其行中的单元格。
回答by Michael Benjamin
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:
如果目标是创建具有相等高度行的网格，其中网格中最高的单元格设置所有行的高度，这里有一个快速而简单的解决方案：
- Set the container to
grid-auto-rows: 1fr
- 将容器设置为
grid-auto-rows: 1fr
How it works
这个怎么运作
Grid Layout provides a unit for establishing flexible lengths in a grid container. This is the frunit. It is designed to distribute free space in the container and is somewhat analogous to the flex-growproperty in flexbox.
网格布局提供了在网格容器中建立灵活长度的单元。这是fr单位。它旨在分配容器中的可用空间，有点类似于flex-growflexbox 中的属性。
If you set all rows in a grid container to 1fr, let's say like this:
如果您将网格容器中的所有行设置为1fr，让我们这样说：
grid-auto-rows: 1fr;
... then all rows will be equal height.
...那么所有行的高度将相等。
It doesn't really make sense off-the-bat because fris 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.
它没有真正的意义，因为fr它应该分配可用空间。如果几行的内容具有不同的高度，那么当空间分布时，一些行会按比例变小和变高。
Except, buried deep in the grid spec is this little nugget:
除了，深埋在网格规范中的是这个小金块：
7.2.3. Flexible Lengths: the
frunit...
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.The used size of each flex-sized grid track is computed by determining the
max-contentsize of each flex-sized grid track and dividing that size by the respective flex factor to determine a “hypothetical1frsize”.The maximum of those is used as the resolved
1frlength (the flex fraction), which is then multiplied by each grid track's flex factor to determine its final size.
...
当可用空间无限时（当网格容器的宽度或高度不确定时会发生这种情况），flex-sized (
fr) 网格轨道会根据其内容调整大小，同时保持各自的比例。每个弹性大小的网格轨道的使用大小是通过确定
max-content每个弹性大小的网格轨道的大小并将该大小除以相应的弹性因子以确定“假设1fr大小”来计算的。其中的最大值用作解析
1fr长度（弯曲部分），然后乘以每个网格轨道的弯曲因子以确定其最终大小。
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.
所以，如果我没看错的话，在处理动态大小的网格（例如，高度不确定）时，网格轨道（在这种情况下为行）的大小会与其内容相符。
The height of each row is determined by the tallest (max-content) grid item.
每行的高度由最高的 ( max-content) 网格项决定。
The maximum height of those rows becomes the length of 1fr.
这些行的最大高度变为 的长度1fr。
That's how 1frcreates equal height rows in a grid container.
这就是1fr在网格容器中创建等高行的方式。
Why flexbox isn't an option
为什么 flexbox 不是一个选项
As noted in the question, equal height rows are not possible with flexbox.
如问题中所述，flexbox 无法实现等高的行。
Flex items can be equal height on the same row, but not across multiple rows.
Flex 项目可以在同一行上具有相同的高度，但不能跨多行。
This behavior is defined in the flexbox spec:
此行为在 flexbox 规范中定义：
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.
在多行 flex 容器中，每行的交叉大小是包含行上的 flex 项目所需的最小大小。
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.
换句话说，当基于行的 flex 容器中有多行时，每行的高度（“交叉大小”）是包含行上的 flex 项目所需的最小高度。
回答by Hlsg
The short answer is that setting grid-auto-rows: 1fr;on the grid container solves what was asked.
简短的回答是grid-auto-rows: 1fr;网格容器上的设置解决了所问的问题。
