CSS 网格布局中的等高行

Question

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

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

Answer 1

简答

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

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

---

工作原理

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

如果您将网格容器中的所有行设置为1fr，我们可以这样说：

grid-auto-rows: 1fr;

...那么所有行的高度都相同。

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

除了，深埋在网格规范中的是这个小金块：

7.2.3. Flexible Lengths: the fr unit

...

当可用空间是无限时（当网格 容器的宽度或高度是不确定的），flex-sized (fr) 网格轨道是 根据内容调整大小，同时保持各自的比例。

每个 flex-sized 网格轨道的使用大小是通过确定 每个 flex-sized 网格轨道的 max-content 大小并将其划分 通过相应的弹性系数确定“假设的1fr 大小”。

其中的最大值用作解析的1fr 长度（ flex 分数），然后乘以每个网格轨道的 flex 决定其最终大小的因素。

所以，如果我没看错的话，在处理动态大小的网格（例如，高度是不确定的）时，网格轨道（在本例中为行）的大小会根据它们的内容调整。

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

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

这就是1fr 在网格容器中创建等高行的方式。

---

为什么 flexbox 不是一个选项

如问题中所述，使用 flexbox 无法实现等高行。

Flex 项目在同一行上的高度可以相同，但不能跨多行。

这种行为在 flexbox 规范中定义：

6. Flex Lines

在多行弹性容器中，每行的交叉尺寸是包含该行上的弹性项目所需的最小尺寸。

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

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>

View on CodePen