不用写复杂媒体查询！用 CSS Grid 轻松制作自适应网页卡片布局

网页开发中有一个常见问题：电脑屏幕足够宽，可以一行展示三张卡片，但手机屏幕较窄，只能展示一张。如果每次都手动计算列数，不仅麻烦，后期修改也不方便。

今天我们通过一个完整的小例子，学习如何实现自动适应屏幕的卡片布局。

一、先认识 CSS Grid

CSS Grid 是一种二维网页布局方式，可以同时控制元素的行和列，非常适合制作网格结构。

假设有三个卡片，最简单的三列布局可以这样写：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

其中：

• display: grid：将容器设置为网格布局。
• repeat(3, 1fr)：创建三列，每列平均分配可用空间。
• gap: 20px：设置卡片之间的间距。

这种方式简单，但列数固定。如果屏幕变窄，就需要额外编写媒体查询调整布局。

二、关键技巧：让列数自动变化

我们可以将 repeat() 中的数字改成 auto-fit：

.container {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

这段代码就是今天的核心。

它包含三个重要概念：

1. auto-fit：自动适应列数

浏览器会根据容器的可用宽度，自动安排能够放下的列。宽屏可以显示多列，窄屏则会减少列数。

2. minmax(220px, 1fr)：设置列宽范围

每列理想情况下至少宽 220px，剩余空间则通过 1fr 平均分配。

3. gap：控制卡片间距

可以使用 gap: 16px 或 gap: 24px，根据设计需要调整。

与固定列数相比，这种方式不必提前知道用户使用的是手机还是电脑，就能自动调整布局。

三、动手练习：制作一个响应式卡片页面

现在创建一个 index.html 文件，将以下代码完整复制进去。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>我的学习卡片</title>

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 24px;
      font-family: sans-serif;
    }

    .container {
      display: grid;
      grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
      max-width: 1000px;
      margin: auto;
    }

    .card {
      padding: 24px;
      border: 1px solid #ddd;
      border-radius: 12px;
      background: #f8f8f8;
    }

    .card h2 {
      margin-top: 0;
      font-size: 20px;
    }

    .card p {
      line-height: 1.7;
    }
  </style>
</head>

<body>
  <main class="container">
    <article class="card">
      <h2>Python 入门</h2>
      <p>学习变量、条件判断和循环。</p>
    </article>

    <article class="card">
      <h2>网页开发</h2>
      <p>掌握 HTML、CSS 和 JavaScript。</p>
    </article>

    <article class="card">
      <h2>效率工具</h2>
      <p>使用实用工具提高日常工作效率。</p>
    </article>

    <article class="card">
      <h2>网络安全</h2>
      <p>了解密码保护和网络安全基础。</p>
    </article>
  </main>
</body>
</html>

四、如何测试响应式效果？

不需要准备多台手机或电脑，浏览器开发者工具就能帮助你测试。

1. 使用 Chrome 或 Edge 打开刚才的网页。
2. 按下 F12 打开开发者工具。
3. 点击设备模拟工具栏，通常可以使用 Ctrl + Shift + M 切换设备模拟模式。
4. 选择不同的手机或平板尺寸。
5. 拖动预览区域的宽度，观察卡片数量和宽度如何变化。

你会发现，屏幕宽度足够时，卡片自动排列成多列；空间不足时，列数会减少，卡片也会自动调整宽度。

这里不需要额外添加 @media 媒体查询，因为 Grid 已经根据容器宽度完成了布局调整。

五、再认识一个容易混淆的属性：auto-fill

CSS Grid 还有一个与 auto-fit 很相似的关键字：auto-fill。

两者都可以自动计算能够容纳的列数，但有一个区别：

• auto-fit：会折叠没有内容的空列，让已有卡片使用剩余空间。
• auto-fill：会尽可能保留可容纳的网格轨道，即使部分轨道没有卡片。

对于普通文章卡片和商品列表，通常可以先选择 auto-fit；如果希望保留固定的网格空位，则可以尝试 auto-fill。

总结： CSS Grid 的 repeat(auto-fit, minmax(220px, 1fr)) 是一个非常实用的响应式布局技巧，不需要为每种屏幕尺寸单独设置列数，就能让网页卡片自动排列；掌握这个组合，你就可以更轻松地制作博客首页、商品列表和个人作品展示页面。