如何在 CSS 网格布局中创建等高行

我猜这是不可能实现使用Flexbox，因为每一行只能是最小的高度，以适应其元素，但这可以实现使用更新的CSS网格吗?

需要明确的是，我希望网格中所有行的所有元素高度相等，而不仅仅是每一行。基本上，最高的“单元格”应该规定所有单元格的高度，而不仅仅是该行单元格的高度。

259972 次浏览
小开
最佳答案

简短的回答

如果目标是创建一个具有等高行的网格，其中网格中最高的单元格设置了所有行的高度，这里有一个快速而简单的解决方案:

  • 将容器设置为grid-auto-rows: 1fr

它是如何工作的

网格布局提供了在网格容器中建立灵活长度的单元。这是< >强fr < / >强单元。它被设计用来在容器中分配自由空间，有点类似于flexbox中的flex-grow属性。

如果你将网格容器中的所有行设置为1fr，让我们这样说:

grid-auto-rows: 1fr;

．.． 那么所有行都是等高的。

这实际上没有意义，因为fr应该分配自由空间。如果几行内容的高度不同，那么当空间分布时，一些行会按比例变小和变高。

< em > < / em >除外，深埋在网格规范中的是这个小块:

7.2.3。灵活长度:fr 单位< /强> < / > < / p >

.．.

当可用空间是无限的(发生在网格 容器的宽度或高度是不确定的)，flex-size (fr)的网格轨道是

.

.

. 每个弯曲大小的网格轨道的使用大小通过确定计算 每个flex大小的网格轨道的max-content大小并将其分割 大小通过各自的伸缩因子来确定一个“假设1fr 大小”。< / p >

其中的最大值被用作解析的1fr长度 弯曲分数)，然后乘以每个网格轨道的弯曲

所以，如果我阅读正确，当处理一个动态大小的网格(例如，高度是不确定的)，网格轨道(行，在这种情况下)的大小是他们的内容。

每行的高度由最高的(max-content)网格项决定。

这些行的最大高度变成1fr的长度。

这就是1fr如何在网格容器中创建等高行。

为什么不选择flexbox

正如问题中所指出的，等高行在flexbox中是不可能的。

伸缩项可以在同一行上具有相同的高度，但不能跨多个行。

此行为在flexbox规范中定义:

6. Flex行< /强> < / >

在多行伸缩容器中，每行的交叉大小是包含该行上伸缩项所需的最小大小。

换句话说，当基于行的伸缩容器中有多行时，每行的高度(“交叉大小”)是包含该行上伸缩项所需的最小高度。

小开

简而言之，在网格容器上设置grid-auto-rows: 1fr;可以解决问题。

* {
box-sizing: border-box;
}


.container {
max-width: 800px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 30px;
grid-row-gap: 30px;
}


.description {
background: blue;
grid-column: 1 / span 4;
}


.col {
background: red;
}
<div class="container">
<div class="description">
Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta.
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta.
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="description">
Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta.
</div>
<div class="col">
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quam deserunt, reprehenderit! Saepe nesciunt laborum, sapiente autem laboriosam quaerat officia dolore similique enim, dolor placeat magni neque iure maiores. Dicta.
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="description">
Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
</div>
<div class="col">
</div>
<div class="col">
Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="description">
Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>

< a href = " https://codepen。io/Hlsg/pen/EXKJba" rel="noreferrer"> CodePen视图 . io/Hlsg/pen/EXKJba" rel="noreferrer">


提交答案