CSS 网格布局中的等高行

Question

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

需要说明的是，我希望网格中所有行的所有元素都具有相同的高度，而不仅仅是每一行。基本上，最高的 "cell" 应该决定所有单元格的高度，而不仅仅是其行中的单元格。

Answer 1

简答

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

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

工作原理

网格布局提供了一个单元，用于在网格容器中建立灵活的长度。这是 fr 单元。它被设计为在容器中自由分发space，有点类似于flexbox中的flex-grow属性。

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

grid-auto-rows: 1fr;

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

它没有任何意义，因为 fr 应该免费分发 space。并且如果几行的内容具有不同的高度，那么当 space 分布时，一些行会按比例变小和变高。

除了，隐藏在网格规范深处的是这个小金块：

7.2.3. Flexible Lengths: the fr unit

...

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-content size of each flex-sized grid track and dividing that size by the respective flex factor to determine a “hypothetical 1fr size”.

The maximum of those is used as the resolved 1fr length (the flex fraction), which is then multiplied by each grid track’s flex factor to determine its final size.

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

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

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

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

为什么 flexbox 不是一个选项

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

弹性项目可以在同一行上等高，但不能跨多行。

Flexbox 规范中定义了此行为：

6. Flex Lines

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.

换句话说，当基于行的弹性容器中有多行时，每行的高度（"cross size"）是该行包含弹性项目所需的最小高度。

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

CSS 网格布局中的等高行

Equal height rows in CSS Grid Layout

css

flexbox

grid-layout

css-grid

简答

工作原理

为什么 flexbox 不是一个选项