CSS Grid布局中的等高行

Question

我了解到使用Flexbox是不可能实现这一点的，因为每行只能是适合其元素的最小高度，但是使用更新的CSS Grid可以实现吗？

明确一下，我想要在整个网格中所有行的所有元素具有相等的高度，而不仅仅是每一行。基本上，最高的“单元格”应该决定所有单元格的高度，而不仅仅是它所在行的单元格。

- Hlsg

Answer 1

简短回答

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

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

---

工作原理

网格布局提供了一种在网格容器中建立灵活长度的单位。这是 fr 单位。它旨在分配容器中的可用空间，并且在某种程度上类似于 flexbox 中的 flex-grow 属性。

如果将网格容器中的所有行都设置为 1fr，就像这样：

grid-auto-rows: 1fr;

如果使用 1fr，则所有行的高度将相等。

一开始这似乎没有意义，因为 fr 应该分配自由空间。如果有多行内容高度不同，则在分配空间时，有些行会成比例变小或变高。

除非在网格规范中深藏着这个小玩意：

7.2.3. 弹性长度: fr 单位

...

当可用空间是无限的（即网格容器的宽度或高度不确定时），大小弹性（fr）网格跟踪将根据内容调整其大小，同时保留各自的比例。

每个大小弹性网格轨道的使用大小是通过确定每个大小弹性网格轨道的 max-content 大小，并将该大小除以相应的弹性系数来确定“假设大小为1fr”的大小。

其中最大值用作解析的1fr长度（弹性分数），然后乘以每个网格轨道的弹性系数来确定其最终大小。

因此，如果我理解正确的话，在处理动态大小的网格（例如高度不确定）时，网格轨道（在本例中为行）将根据其内容的大小进行调整。

每行的高度由最高的（max-content）网格项确定。

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

这就是如何在网格容器中使用 1fr 创建等高行的方法。

---

为什么 flexbox 不是一个选择

正如问题中所指出的那样，flexbox 无法实现等高行。

虽然同一行上的 flex 项目可以等高，但跨多行则无法实现等高。

此行为在 flexbox 规范中被定义：

6. Flex Lines

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

换句话说，在基于行的 flex 容器中有多行时，每行的高度（“交叉大小”）是包含该行上的 flex 项所需的最小高度。

- Michael Benjamin

---

在上述段落中，“并将该大小除以相应的flex因子以确定“假设的1fr大小””这一部分的确切含义是什么？ 例如，如果网格容器第一行中最高的大小为100px，并且该行的grid-auto-row为2，这是否意味着第一行的1fr大小等于50px？ - Od Chan

为了在多行中实现相同高度的盒子，我们应该使用CSS网格而不是CSS弹性布局，对吗？ - moshiuramit

@moshiuramit 正确的。 - Spock

如果目标是创建一个具有相等高度行的网格，其中最短的单元格设置所有行的高度，该怎么办？ - Colin S

如果图片在物品中，就无法工作。 - Cybernetic

Answer 2

简短的回答是在网格容器上设置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>

在CodePen上查看

- Hlsg

---

感谢提供 CodePen，Michael 的回答解释得很好，但是 CodePen 明确展示了我需要做的事情。 - Sam

如果您有包含<li>的<ul>对象，则此方法无法正常工作。 - Cheetaiean

如果网格的子元素也是网格，那么它将无法正常工作 - 将子元素更改为弹性布局将使其正常工作。 - undefined