用代码示例讲解如何使用auto-fill和minmax()实现自适应列数

最新推荐文章于 2025-12-15 18:15:00 发布

原创最新推荐文章于 2025-12-15 18:15:00 发布 · 684 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言 #css

CSS 专栏收录该内容

3 篇文章

订阅专栏

一、核心公式解析

实现自适应列数的核心语法是：

grid-template-columns: repeat(auto-fill, minmax(最小列宽, 1fr));

组成部分	作用
`repeat()`	重复生成指定的列 / 行规则
`auto-fill`	自动计算「容器宽度能容纳多少个「最小列宽」的列」，生成对应数量的列
`minmax(最小列宽, 1fr)`	列宽规则：✅ 最小不低于「最小列宽」（避免列太窄）✅ 最大按 `1fr` 等分剩余空间（列宽自适应拉伸）

二、基础示例（auto-fill 实现自适应卡片网格）

以下是可直接运行的完整代码，包含详细注释，实现「屏幕宽则列多、屏幕窄则列少」的自适应效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>auto-fill + minmax 自适应列数</title>
  <style>
    /* 重置默认样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      padding: 20px;
      background: #f5f5f5;
    }

    /* 核心：网格容器 */
    .card-container {
      display: grid;
      /* 关键：auto-fill 自动填充列数，列宽最小200px、最大等分 */
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px; /* 列/行间距，提升美观度 */
    }

    /* 网格项（卡片） */
    .card {
      padding: 24px;
      background: #42b983;
      color: white;
      border-radius: 8px;
      text-align: center;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div class="card-container">
    <div class="card">卡片 1</div>
    <div class="card">卡片 2</div>
    <div class="card">卡片 3</div>
    <div class="card">卡片 4</div>
    <div class="card">卡片 5</div>
    <div class="card">卡片 6</div>
  </div>
</body>
</html>

效果演示（拖动浏览器窗口可直观看到）：

屏幕宽度	列数	列宽	逻辑
≥ 1296px（2006 + 165）	6 列	200px（刚好填满）	auto-fill 计算出能放 6 列，列宽取最小值 200px
864px ~ 1295px	4 列	自适应拉伸（>200px）	只能放 4 列，剩余空间按 1fr 等分，列宽 > 200px
432px ~ 863px	2 列	自适应拉伸	只能放 2 列，列宽进一步拉伸
< 432px	1 列	100% 容器宽度	只能放 1 列，列宽占满容器

三、auto-fill vs auto-fit（关键区别）

很多人会混淆这两个属性，核心差异是「对空列的处理」，以下是对比示例：

1. 对比代码（仅修改 repeat 内的关键词）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>auto-fill vs auto-fit</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { padding: 20px; display: flex; gap: 20px; flex-wrap: wrap; }
    .container {
      flex: 1;
      min-width: 300px;
      background: #eee;
      padding: 10px;
    }
    .card {
      background: #42b983;
      color: white;
      padding: 20px;
      text-align: center;
    }

    /* auto-fill：保留空列位置 */
    .fill {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 8px;
    }

    /* auto-fit：折叠空列，现有列撑满容器 */
    .fit {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 8px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h3>auto-fill（保留空列）</h3>
    <div class="fill">
      <div class="card">1</div>
      <div class="card">2</div>
    </div>
  </div>

  <div class="container">
    <h3>auto-fit（折叠空列）</h3>
    <div class="fit">
      <div class="card">1</div>
      <div class="card">2</div>
    </div>
  </div>
</body>
</html>

效果差异：

auto-fill：容器宽度能放 10 列，但只有 2 个卡片 → 显示 2 个卡片 + 8 个空列位置（网格总宽度 = 10 列宽度，卡片宽度 = 100px）。
auto-fit：容器宽度能放 10 列，但只有 2 个卡片 → 折叠 8 个空列，2 个卡片自动撑满容器（卡片宽度 = 容器宽度 / 2 - 间距）。

选型建议：

卡片数量不确定、希望列数随内容自动适配 → 用 auto-fit（更常用，视觉更整洁）；
需要固定列数框架（即使内容少也要保留列位置）→ 用 auto-fill（如表格类布局）。

四、进阶优化：结合 clamp () 让列宽更灵活

minmax() 的最小值可以结合 clamp()，实现「根据屏幕宽度动态调整最小列宽」，适配不同尺寸设备：

.card-container {
  /* 列宽规则：
     最小列宽：屏幕<375px时160px，375px~1200px时30vw，最大220px；
     最大列宽：1fr（等分剩余空间）
  */
  grid-template-columns: repeat(auto-fit, minmax(clamp(160px, 30vw, 220px), 1fr));
  gap: 16px;
}