CSS 网格：列高适合内容

CSS 网格（CSS Grid）是一种强大的布局系统，允许您用少量的代码轻松地创建复杂的布局。其中一项特性是可以让列高适合内容。当列高根据内容而定时，列会在每个单元格中自动调整，而不会使整个网格布局变形。

如何让列高适合内容

让列高适合内容的方法很简单，您只需要设置一个 CSS 属性就行了。

grid-auto-rows: minmax(min-height, max-height);

让我们对这个属性进行一下解释：

• grid-auto-rows：指定网格中未定义的行的高度
• minmax(min-height, max-height)：指定最小高度和最大高度。这将使列高适应它们的内容，但将限制列的最大高度。

例如，以下 CSS 规则将使每个单元格的列高度根据内容而定，但是最大高度不超过 200 像素：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(auto, 200px);
}

现在我们已经告诉了浏览器如何使列高适合内容，接下来我们可以向网格中添加一些内容来测试它。让我们假设我们有一个网格，包含三个单元格，每个单元格中都有一个带有段落的 div 元素。

<div class="grid-container">
  <div class="grid-item">
    <div>
      <h1>第一个单元格</h1>
      <p>这是第一个单元格的内容</p>
    </div>
  </div>
  <div class="grid-item">
    <div>
      <h1>第二个单元格</h1>
      <p>这是第二个单元格的内容。这是一段相当长的文本，我们可以看看列是如何根据内容而变化的。</p>
      <p>更多文本。</p>
      <p>最后一行。</p>
    </div>
  </div>
  <div class="grid-item">
    <div>
      <h1>第三个单元格</h1>
      <p>这是第三个单元格的内容</p>
    </div>
  </div>
</div>

就像这样：

由于我们已经使用了 minmax(auto, 200px)，所以即使第二个单元格中有很多内容，列高也不会超过 200 像素。

总结

让列高度适应内容是 CSS 网格的一个非常有用的功能，使您的布局更加灵活。使用 grid-auto-rows: minmax(min-height, max-height) 可以实现此目的。