CSS3 布局 - grid-auto-rows 属性

1. 简介

在 CSS Grid 布局中，grid-auto-rows 属性用于指定自动生成的网格行的大小。当网格项目超出了通过 grid-template-rows 定义的行数时，浏览器会自动创建额外的行，这些行的大小由 grid-auto-rows 属性控制。

2. grid-auto-rows 属性详解

grid-auto-rows 属性定义了浏览器在需要时自动创建的隐式网格行的默认大小。

2.1 语法

.container {
  grid-auto-rows: <track-size>;
}

其中 <track-size> 可以是以下值：

长度值（如 px、em、rem 等）
百分比值（如 50%）
弹性值（如 1fr）
max-content - 基于内容的最大高度
min-content - 基于内容的最小高度
auto - 浏览器自动计算

2.2 取值说明

取值	描述
长度值	固定的行高，如 `100px`、`20em` 等
百分比值	相对于网格容器高度的百分比
弹性值	使用 `fr` 单位，根据可用空间分配
`max-content`	行高等于内容的最大高度
`min-content`	行高等于内容的最小高度
`auto`	浏览器自动计算，默认值

3. 示例代码

3.1 基本使用示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>grid-auto-rows 属性示例</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3 列 */
      grid-template-rows: 100px; /* 只定义 1 行 */
      grid-auto-rows: 150px; /* 自动生成的行高为 150px */
      gap: 10px;
      padding: 10px;
      background-color: #f0f0f0;
    }
    
    .grid-item {
      background-color: #4CAF50;
      color: white;
      padding: 20px;
      text-align: center;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div> <!-- 这将创建一个自动行 -->
    <div class="grid-item">5</div> <!-- 位于自动行中 -->
    <div class="grid-item">6</div> <!-- 位于自动行中 -->
  </div>
</body>
</html>

3.2 不同取值示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>grid-auto-rows 不同取值示例</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 80px;
      gap: 10px;
      margin-bottom: 20px;
      padding: 10px;
      background-color: #f0f0f0;
      width: 400px;
    }
    
    .grid-item {
      background-color: #2196F3;
      color: white;
      padding: 20px;
      text-align: center;
      font-size: 18px;
    }
    
    /* 示例 1: 固定长度 */
    .example1 {
      grid-auto-rows: 120px;
    }
    
    /* 示例 2: 弹性单位 */
    .example2 {
      grid-auto-rows: 1fr;
      height: 300px;
    }
    
    /* 示例 3: 基于内容 */
    .example3 {
      grid-auto-rows: max-content;
    }
  </style>
</head>
<body>
  <h3>示例 1: 固定长度 (120px)</h3>
  <div class="grid-container example1">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3 (自动行)</div>
    <div class="grid-item">4 (自动行)</div>
  </div>
  
  <h3>示例 2: 弹性单位 (1fr)</h3>
  <div class="grid-container example2">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3 (自动行)</div>
    <div class="grid-item">4 (自动行)</div>
  </div>
  
  <h3>示例 3: 基于内容 (max-content)</h3>
  <div class="grid-container example3">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3 (自动行，内容决定高度)</div>
    <div class="grid-item">4 (自动行，内容决定高度)</div>
  </div>
</body>
</html>

4. 布局图示

4.1 基本布局示意图

+-------------------------+-------------------------+
|                         |                         |
|  网格项目 1              |  网格项目 2              |
|                         |                         |
+-------------------------+-------------------------+
|                         |                         |
|  显式定义的行 1          |  显式定义的行 1          |
|  (grid-template-rows)    |  (grid-template-rows)    |
|                         |                         |
+-------------------------+-------------------------+
|                         |                         |
|  网格项目 3              |  网格项目 4              |
|                         |                         |
+-------------------------+-------------------------+
|                         |                         |
|  自动生成的行 2          |  自动生成的行 2          |
|  (grid-auto-rows)        |  (grid-auto-rows)        |
|                         |                         |
+-------------------------+-------------------------+
|                         |                         |
|  网格项目 5              |  网格项目 6              |
|                         |                         |
+-------------------------+-------------------------+

4.2 自动行生成流程

浏览器首先创建通过 grid-template-rows 定义的显式行
当网格项目数量超过显式行数时，浏览器开始创建隐式行
隐式行的大小由 grid-auto-rows 属性决定
隐式行的数量根据网格项目的数量自动计算

5. 实际应用

5.1 卡片布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片布局</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      grid-auto-rows: minmax(200px, auto);
      gap: 20px;
      padding: 20px;
      background-color: #f5f5f5;
    }
    
    .card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      padding: 20px;
      display: flex;
      flex-direction: column;
    }
    
    .card h3 {
      margin-top: 0;
      color: #333;
    }
    
    .card p {
      flex-grow: 1;
      color: #666;
    }
    
    .card button {
      margin-top: 15px;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="card">
      <h3>产品 1</h3>
      <p>这是一个简短的产品描述，介绍产品的主要特点和优势。</p>
      <button>查看详情</button>
    </div>
    <div class="card">
      <h3>产品 2</h3>
      <p>这是一个更详细的产品描述，包含更多关于产品功能和使用场景的信息。</p>
      <button>查看详情</button>
    </div>
    <div class="card">
      <h3>产品 3</h3>
      <p>简短描述。</p>
      <button>查看详情</button>
    </div>
    <div class="card">
      <h3>产品 4</h3>
      <p>这是一个非常详细的产品描述，包含了产品的所有特性、规格、使用方法和注意事项。</p>
      <button>查看详情</button>
    </div>
    <div class="card">
      <h3>产品 5</h3>
      <p>中等长度的产品描述，提供了足够的信息让用户了解产品。</p>
      <button>查看详情</button>
    </div>
  </div>
</body>
</html>

5.2 动态内容列表

当列表内容不确定时，grid-auto-rows 可以确保新添加的项目有一致的高度：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态内容列表</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr;
      grid-auto-rows: minmax(80px, auto);
      gap: 10px;
      padding: 20px;
      background-color: #f0f0f0;
      max-width: 600px;
    }
    
    .list-item {
      background-color: #2196F3;
      color: white;
      padding: 20px;
      border-radius: 5px;
      display: flex;
      align-items: center;
    }
    
    button {
      margin: 20px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="grid-container" id="listContainer">
    <div class="list-item">项目 1: 简短内容</div>
    <div class="list-item">项目 2: 中等长度的内容，提供更多信息</div>
    <div class="list-item">项目 3: 简短内容</div>
  </div>
  <button onclick="addItem()">添加项目</button>
  
  <script>
    function addItem() {
      const container = document.getElementById('listContainer');
      const itemCount = container.children.length + 1;
      const newItem = document.createElement('div');
      newItem.className = 'list-item';
      
      // 随机生成不同长度的内容
      const contentLength = Math.floor(Math.random() * 3);
      let content;
      switch(contentLength) {
        case 0:
          content = `项目 ${itemCount}: 简短内容`;
          break;
        case 1:
          content = `项目 ${itemCount}: 中等长度的内容，提供更多信息`;
          break;
        case 2:
          content = `项目 ${itemCount}: 非常详细的内容，包含了所有相关信息和细节`;
          break;
      }
      
      newItem.textContent = content;
      container.appendChild(newItem);
    }
  </script>
</body>
</html>

6. 浏览器兼容性

浏览器	支持版本
Chrome	57+
Firefox	52+
Safari	10.1+
Edge	16+
IE	不支持

7. 总结

grid-auto-rows 属性用于定义自动生成的网格行的大小
当网格项目数量超过通过 grid-template-rows 定义的行数时，浏览器会自动创建额外的行
可以使用长度值、百分比、弹性单位等多种方式指定行高
与 grid-auto-flow 属性配合使用，可以控制网格项目的填充顺序
在响应式设计中，可以根据屏幕尺寸调整 grid-auto-rows 的值
minmax() 函数常用于设置行高范围，确保内容有足够的空间显示

8. 练习

基础练习：创建一个网格容器，定义 3 列和 1 行，然后添加 6 个网格项目，观察自动生成的行的行为。
进阶练习：使用 grid-auto-rows 创建一个博客文章列表，确保每篇文章都有足够的空间显示内容。
挑战练习：结合 grid-auto-rows 和媒体查询，创建一个在不同屏幕尺寸下有不同行高的响应式布局。

9. 扩展阅读

通过本教程，你已经了解了 grid-auto-rows 属性的基本用法和实际应用。在实际项目中，合理使用 grid-auto-rows 可以使网格布局更加灵活，特别是在处理动态内容时，确保所有内容都能得到适当的空间展示。