CSS CSS Grid 行最大高度 1fr，滚动内容

在本文中，我们将介绍如何使用CSS网格布局中的行最大高度1fr来创建具有滚动内容功能的网格布局。

阅读更多：CSS 教程

CSS 网格布局简介

CSS网格布局是一种强大的布局系统，可以在网页上创建复杂的网格结构。它使用网格容器和网格项来定义网格的行和列，并通过将内容放置在这些网格项中来布局网页。网格布局提供了一种灵活的方式来排列和对齐内容，使得设计更加自由和简单。

CSS网格行高度

在CSS网格布局中，我们可以通过grid-template-rows属性来定义网格的行高。默认情况下，行高度会根据内容自动调整。

例如，我们可以使用下面的代码来创建一个包含两行的网格布局：

.grid-container {
  display: grid;
  grid-template-rows: auto auto;
}

这样，网格容器会根据内容的高度自动调整行高。如果我们将内容加入到这个网格布局中，行高会根据内容的高度而自动调整。

使用1fr设置行最大高度

然而，在某些情况下，我们可能希望网格行具有最大高度，而不是根据内容自动调整。在这种情况下，我们可以使用1fr单位来设置行的最大高度。

例如，我们可以使用下面的代码来创建一个包含两行的网格布局，其中第一行的高度是内容的实际高度，而第二行的高度被限制在网格容器的剩余空间中：

.grid-container {
  display: grid;
  grid-template-rows: auto 1fr;
}

这样，第一行的高度会根据内容的高度而自动调整，而第二行的高度会填充网格容器的剩余空间。

滚动内容功能

有时，我们可能希望在具有行最大高度1fr的网格布局中，当内容超过行的高度时，内容能够滚动显示而不会溢出。为了实现这个功能，我们可以将行的高度设置为固定的像素值，并且将内容包裹在一个滚动容器中。

例如，我们可以使用下面的代码来创建一个包含两行的网格布局，其中第一行的高度是根据内容自动调整的，而第二行的高度是固定的，并且包含一个滚动容器：

<div class="grid-container">
  <div class="grid-item">内容1</div>
  <div class="grid-item">
    <div class="scroll-container">
      <!-- 滚动内容放在这里 -->
    </div>
  </div>
</div>

.grid-container {
  display: grid;
  grid-template-rows: auto 300px; /* 第二行的高度为300像素 */
}

.scroll-container {
  overflow: auto; /* 显示滚动条 */
  height: 100%; /* 填充滚动容器的高度 */
}

这样，当第二行的内容超过300像素高度时，滚动条会自动出现，并且可以滚动查看内容。

示例：创建一个具有行最大高度1fr和滚动内容的网格布局

下面的代码演示了如何使用行最大高度1fr和滚动内容来创建一个网格布局，其中第一行的高度是根据内容自动调整的，而第二行的高度是固定的并且包含一个滚动容器：

<div class="grid-container">
  <div class="grid-item">这是第一行的内容，高度会根据内容自动调整。</div>
  <div class="grid-item">
    <div class="scroll-container">
      <!-- 这是第二行的内容，当内容超过300像素高度时，会出现滚动条。 -->
    </div>
  </div>
</div>

.grid-container {
  display: grid;
  grid-template-rows: auto 300px; /* 第二行的高度为300像素 */
}

.scroll-container {
  overflow: auto; /* 显示滚动条 */
  height: 100%; /* 填充滚动容器的高度 */
}

在上面的示例中，当第二行的内容超过300像素高度时，滚动条会自动出现，并且可以滚动查看全部内容。