编程马·菜鸟教程

Appearance

第11章：Grid布局自动布局 ​

在本节中，我们将介绍Grid布局中的自动布局功能，包括auto-fill和auto-fit，这些功能可以帮助你创建响应式的网格布局。

11.1 auto-fill：自动填充网格 ​

auto-fill关键字用于根据容器宽度自动计算并填充列数。

语法 ​

css
.container {
  grid-template-columns: repeat(auto-fill, <column-size>);
}

说明 ​

  • auto-fill会尽可能多地创建列，即使有些列是空的
  • 当容器宽度变化时，列数会自动调整

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>auto-fill</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
      margin-bottom: 20px;
    }
    
    .item {
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>auto-fill 示例</h1>
  <p>调整浏览器窗口大小，观察列数的变化</p>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

11.2 auto-fit：自适应填充网格 ​

auto-fit关键字用于根据容器宽度自动计算并填充列数，与auto-fill类似，但会自动调整列宽以填满容器。

语法 ​

css
.container {
  grid-template-columns: repeat(auto-fit, <column-size>);
}

说明 ​

  • auto-fit会尽可能多地创建列，然后拉伸这些列以填满容器
  • 当容器宽度变化时，列数和列宽会自动调整

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>auto-fit</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
    }
    
    .item {
      background-color: #e74c3c;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>auto-fit 示例</h1>
  <p>调整浏览器窗口大小，观察列数和列宽的变化</p>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</body>
</html>

11.3 与fr、minmax()函数结合 ​

minmax()函数 ​

minmax()函数用于设置一个尺寸范围，第一个参数是最小值，第二个参数是最大值。

语法 ​

css
.container {
  grid-template-columns: repeat(auto-fit, minmax(<min-size>, <max-size>));
}

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>auto-fit + minmax</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      background-color: #f0f0f0;
      padding: 15px;
    }
    
    .card {
      background-color: #2ecc71;
      color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .card h3 {
      margin-top: 0;
    }
  </style>
</head>
<body>
  <h1>auto-fit + minmax 实现响应式卡片网格</h1>
  <p>调整浏览器窗口大小，观察卡片布局的变化</p>
  <div class="container">
    <div class="card">
      <h3>卡片 1</h3>
      <p>这是一张卡片，使用Grid布局实现响应式效果。</p>
    </div>
    <div class="card">
      <h3>卡片 2</h3>
      <p>这是另一张卡片，使用Grid布局实现响应式效果。</p>
    </div>
    <div class="card">
      <h3>卡片 3</h3>
      <p>这是第三张卡片，使用Grid布局实现响应式效果。</p>
    </div>
    <div class="card">
      <h3>卡片 4</h3>
      <p>这是第四张卡片，使用Grid布局实现响应式效果。</p>
    </div>
    <div class="card">
      <h3>卡片 5</h3>
      <p>这是第五张卡片，使用Grid布局实现响应式效果。</p>
    </div>
  </div>
</body>
</html>

11.4 实操：自动布局实现响应式卡片网格 ​

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>响应式卡片网格</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f5f5f5;
    }
    
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    .card-img {
      width: 100%;
      height: 150px;
      background-color: #3498db;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 24px;
    }
    
    .card-content {
      padding: 20px;
    }
    
    .card-title {
      margin-top: 0;
      color: #333;
    }
    
    .card-text {
      color: #666;
      line-height: 1.5;
    }
    
    .card-button {
      display: inline-block;
      padding: 8px 16px;
      background-color: #3498db;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>响应式卡片网格</h1>
  <p>调整浏览器窗口大小，观察卡片布局的变化</p>
  <div class="container">
    <div class="card">
      <div class="card-img">📱</div>
      <div class="card-content">
        <h3 class="card-title">产品 1</h3>
        <p class="card-text">这是一款优秀的产品，具有多种功能和特性。</p>
        <a href="#" class="card-button">了解更多</a>
      </div>
    </div>
    <div class="card">
      <div class="card-img">💻</div>
      <div class="card-content">
        <h3 class="card-title">产品 2</h3>
        <p class="card-text">这是另一款优秀的产品，具有多种功能和特性。</p>
        <a href="#" class="card-button">了解更多</a>
      </div>
    </div>
    <div class="card">
      <div class="card-img">🎮</div>
      <div class="card-content">
        <h3 class="card-title">产品 3</h3>
        <p class="card-text">这是第三款优秀的产品，具有多种功能和特性。</p>
        <a href="#" class="card-button">了解更多</a>
      </div>
    </div>
    <div class="card">
      <div class="card-img">📷</div>
      <div class="card-content">
        <h3 class="card-title">产品 4</h3>
        <p class="card-text">这是第四款优秀的产品，具有多种功能和特性。</p>
        <a href="#" class="card-button">了解更多</a>
      </div>
    </div>
    <div class="card">
      <div class="card-img">🎵</div>
      <div class="card-content">
        <h3 class="card-title">产品 5</h3>
        <p class="card-text">这是第五款优秀的产品，具有多种功能和特性。</p>
        <a href="#" class="card-button">了解更多</a>
      </div>
    </div>
    <div class="card">
      <div class="card-img">📺</div>
      <div class="card-content">
        <h3 class="card-title">产品 6</h3>
        <p class="card-text">这是第六款优秀的产品，具有多种功能和特性。</p>
        <a href="#" class="card-button">了解更多</a>
      </div>
    </div>
  </div>
</body>
</html>

实操练习 ​

  1. 创建一个使用auto-fill的网格布局
  2. 创建一个使用auto-fit的网格布局
  3. 使用minmax()函数结合auto-fit实现响应式卡片网格
  4. 调整浏览器窗口大小，观察布局的变化

通过本节的学习，你已经掌握了Grid布局中的自动布局功能。这些功能可以帮助你创建响应式的网格布局，使布局在不同屏幕尺寸下都能良好显示。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建