CSS网格布局中的等高行 [英] Equal height rows in CSS Grid Layout
问题描述
为了说清楚，我希望所有行中的网格中的所有元素都具有相同的高度，而不是每行。基本上，最高的细胞应该决定所有细胞的高度，而不是其行中的细胞。 如果目标是创建一个网格与高度相等的行，网格中最高的单元格设置所有行的高度，这是一个快速简单的解决方案：
grid-auto-rows：1fr
工作原理
网格布局提供了在网格容器中建立灵活长度的单位。这是 fr 单元。它被设计为在容器中分配空闲空间，有点类似于flexbox中的 flex-grow 属性。
如果将网格容器中的所有行设置为 1fr ，那么就这样说吧：
grid-auto-rows：1fr;
...那么所有行的高度都是相等的。
现在没有什么意义，因为 fr 应该分配空闲空间。如果多行的内容高度不同，那么当空间分布时，一些行会比例地变小和变高。
...
如果可用空间是无限的（当grid
容器的宽度或高度不确定时发生这种情况），弹性大小的网格轨道大小为
其内容同时保持各自的比例。
每个弹性大小的网格轨道的已用尺寸是通过确定每个弹性尺寸的网格轨道的 max-content 大小并将其除以
size由相应的弹性系数确定假定 1fr
大小。这些最大值被用作已解析的 1fr 长度（
flex分数），然后乘以每个网格曲线的flex
因子以确定它的最终大小。
所以，如果我正确地阅读这个，当处理动态大小的网格（例如，高度是不确定的），网格轨道（在这种情况下，行）的大小是根据它们的内容来确定的。
Flex项目的高度可以相同行，但不跨越多行。
此行为在flexbox规范中定义：
在多行柔性容器中，每行的交叉大小是包含柔性项目所需的最小大小
换句话说，当一个基于行的flex容器中有多行时，每行的高度cross size）是包含行上的flex项目所需的最小高度。
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:
- Set the container to
grid-auto-rows: 1fr
How it works
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.
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.
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:
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 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 resolved1frlength (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.
The height of each row is determined by the tallest (max-content) grid item.
The maximum height of those rows becomes the length of 1fr.
That's how 1fr creates equal height rows in a grid container.
The alternative would be to fetch the height of the tallest item with JavaScript, then apply that value to grid-template-rows or grid-auto-rows. Fortunately, the grid spec provides an algorithm that handles the task.
Why flexbox isn't an option
As noted in the question, equal height rows are not possible with flexbox.
Flex items can be equal height on the same row, but not across multiple rows.
This behavior is defined in the flexbox spec:
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屋！
