响应式 Grid：适配所有设备的网格布局

想象你在设计一个相册，在大桌子上，你可能会摆 6 列照片；在小桌子上，你可能只摆 3 列；在手机屏幕这么小的"桌子"上，你可能只摆 1 列。Grid 的响应式特性就像一个智能助手，帮你根据"桌子"的大小自动调整照片的排列，不需要你手动移动每一张照片。

响应式设计是现代 Web 开发的核心要求。Grid 布局提供了多种强大的响应式技巧，从完全自动的解决方案到精确控制的媒体查询，让你的布局在任何设备上都完美呈现。

自动响应式布局

Grid 最令人兴奋的特性之一是可以创建完全自动的响应式布局，不需要任何媒体查询。

auto-fit 和 auto-fill

auto-fit 和 auto-fill 配合 repeat() 函数使用，可以自动计算网格的列数。

auto-fill：填充尽可能多的列

css

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: 20px;
}

假设容器宽度是 900px：

能放下 4 列（4 × 200px = 800px）
剩余 100px（不够再放一列）
关键点：即使只有 3 个项目，Grid 也会创建 4 列，第 4 列是空的

视觉效果：

容器宽度：900px
┌──────┬──────┬──────┬──────┐
│ 项目1│ 项目2 │ 项目3│  空  │
└──────┴──────┴──────┴──────┘

auto-fit：收缩空列

css

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  gap: 20px;
}

同样的情况（容器 900px，3 个项目）：

能放下 4 列
但因为只有 3 个项目
关键点：空列会被收缩掉

视觉效果：

容器宽度：900px
┌──────┬──────┬──────┐
│ 项目1│ 项目2 │ 项目3│  (剩余空间)
└──────┴──────┴──────┘

什么时候用哪个？

使用 auto-fill：

当你需要保持列宽一致时
当你想要网格右侧有留白时
当内容数量固定时

使用 auto-fit：

当你希望项目扩展以填充所有可用空间时
当内容数量可变时
当你想要最大化利用空间时

minmax() 创建灵活的列

auto-fit 和 auto-fill 配合 minmax() 才真正发挥威力：

css

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

这是响应式 Grid 最常用的模式。让我们分解它的工作原理：

minmax(250px, 1fr)：每列最小 250px，最大 1fr
repeat(auto-fit, ...)：自动计算能放下多少列
结果：列数自动调整，每列至少 250px，然后平分剩余空间

具体表现：

假设你有 6 个项目：

宽屏幕（1200px）：

能放下 4 列（4 × 250px = 1000px，剩余 200px）
每列实际宽度：(1200px - 60px gap) / 4 = 285px
显示为 4×2 的网格

中等屏幕（900px）：

能放下 3 列（3 × 250px = 750px，剩余 150px）
每列实际宽度：(900px - 40px gap) / 3 ≈ 286.7px
显示为 3×2 的网格

平板（700px）：

能放下 2 列（2 × 250px = 500px，剩余 200px）
每列实际宽度：(700px - 20px gap) / 2 = 340px
显示为 2×3 的网格

手机（400px）：

只能放下 1 列（250px 最小宽度）
每列实际宽度：400px
显示为 1×6 的网格（垂直堆叠）

看到了吗？完全不需要媒体查询，Grid 自动处理所有响应式调整！

实际应用：卡片网格

html

<div class="card-grid">
  <div class="card">
    <h3>Product 1</h3>
    <p>Description</p>
    <button>Buy Now</button>
  </div>
  <div class="card">
    <h3>Product 2</h3>
    <p>Description</p>
    <button>Buy Now</button>
  </div>
  <!-- 更多卡片... -->
</div>

css

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  padding: 25px;
}

.card {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.card h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 20px;
}

.card p {
  flex-grow: 1;
  color: #666;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.card button {
  padding: 12px 24px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.card button:hover {
  background-color: #1976d2;
}

这个卡片网格会：

在桌面上显示 3-4 列
在平板上显示 2-3 列
在手机上显示 1 列
卡片始终保持至少 280px 宽
自动适配容器宽度

使用媒体查询的精确控制

虽然自动响应式很强大，但有时你需要更精确的控制。媒体查询让你可以为不同屏幕定义完全不同的布局。

改变列数

最常见的响应式策略是在不同屏幕上改变列数：

css

/* 手机：单列 */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* 平板：两列 */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* 桌面：三列 */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
}

/* 大屏：四列 */
@media (min-width: 1440px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
}

改变布局结构

使用模板区域，你可以在不同屏幕上完全重新排列布局：

css

/* 手机：垂直堆叠 */
.page {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
  gap: 10px;
}

/* 平板：侧边栏在右边 */
@media (min-width: 768px) {
  .page {
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "header  header"
      "main    sidebar"
      "footer  footer";
    gap: 20px;
  }
}

/* 桌面：经典三列 */
@media (min-width: 1024px) {
  .page {
    grid-template-columns: 200px 1fr 300px;
    grid-template-areas:
      "header  header  header"
      "sidebar main    aside"
      "footer  footer  footer";
    gap: 30px;
  }
}

改变元素跨度

个别元素可以在不同屏幕上占据不同的空间：

html

<div class="product-grid">
  <div class="product featured">Featured Product</div>
  <div class="product">Product 2</div>
  <div class="product">Product 3</div>
  <div class="product">Product 4</div>
  <div class="product">Product 5</div>
  <div class="product">Product 6</div>
</div>

css

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.product {
  background-color: white;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
}

/* 手机上所有产品都一样大小 */
.featured {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* 平板：特色产品占 2 列 */
@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .featured {
    grid-column: span 2;
  }
}

/* 桌面：特色产品占 2×2 */
@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }

  .featured {
    grid-column: span 2;
    grid-row: span 2;
  }
}

容器查询（Container Queries）

容器查询是一个相对较新的特性（2022 年开始广泛支持），它让元素根据父容器的大小而不是视口大小做出响应。

基础用法

css

/* 定义查询容器 */
.card-container {
  container-type: inline-size;
  /* inline-size: 只跟踪宽度 */
  /* size: 跟踪宽度和高度 */
}

/* 容器内的网格 */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* 当容器宽度 >= 600px 时 */
@container (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 当容器宽度 >= 900px 时 */
@container (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

实际应用：可重用组件

容器查询让组件真正可重用，无论它被放在页面的哪里：

html

<main class="main-content">
  <div class="widget-container">
    <div class="widget-grid">
      <div class="widget">Widget 1</div>
      <div class="widget">Widget 2</div>
      <div class="widget">Widget 3</div>
    </div>
  </div>
</main>

<aside class="sidebar">
  <div class="widget-container">
    <div class="widget-grid">
      <div class="widget">Widget 1</div>
      <div class="widget">Widget 2</div>
    </div>
  </div>
</aside>

css

.widget-container {
  container-type: inline-size;
  container-name: widget-box;
}

.widget-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* 当容器宽度 >= 400px：两列 */
@container widget-box (min-width: 400px) {
  .widget-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 当容器宽度 >= 700px：三列 */
@container widget-box (min-width: 700px) {
  .widget-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

同样的 .widget-grid 组件：

在宽的主内容区可能显示 3 列
在窄的侧边栏可能显示 1 列
完全基于容器大小，而不是视口大小

响应式图片画廊

让我们创建一个完整的响应式图片画廊示例：

html

<div class="gallery">
  <div class="photo photo-large">Large Photo</div>
  <div class="photo">Photo 2</div>
  <div class="photo">Photo 3</div>
  <div class="photo photo-wide">Wide Photo</div>
  <div class="photo">Photo 5</div>
  <div class="photo">Photo 6</div>
  <div class="photo">Photo 7</div>
  <div class="photo">Photo 8</div>
</div>

css

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 15px;
  padding: 20px;
}

.photo {
  background-color: #2196f3;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-weight: bold;
  transition: transform 0.3s;
}

.photo:hover {
  transform: scale(1.05);
  z-index: 10;
}

/* 平板及以上：特殊尺寸照片 */
@media (min-width: 768px) {
  .photo-large {
    grid-column: span 2;
    grid-row: span 2;
  }

  .photo-wide {
    grid-column: span 2;
  }
}

/* 桌面：更多特殊尺寸 */
@media (min-width: 1200px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-auto-rows: 220px;
    gap: 20px;
  }

  .photo-large {
    grid-column: span 3;
    grid-row: span 2;
  }
}

响应式仪表板

仪表板是响应式 Grid 的经典应用场景：

css

.dashboard {
  display: grid;
  gap: 15px;
  padding: 15px;
  background-color: #f5f5f5;
}

/* 手机：垂直堆叠 */
.dashboard {
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "stats"
    "chart"
    "activity"
    "tasks";
}

.widget {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header {
  grid-area: header;
  background-color: #2196f3;
  color: white;
}
.stats {
  grid-area: stats;
}
.chart {
  grid-area: chart;
}
.activity {
  grid-area: activity;
}
.tasks {
  grid-area: tasks;
}

/* 平板：两列 */
@media (min-width: 768px) {
  .dashboard {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
    grid-template-areas:
      "header   header"
      "stats    stats"
      "chart    chart"
      "activity tasks";
  }
}

/* 桌面：复杂布局 */
@media (min-width: 1024px) {
  .dashboard {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 150px 300px 250px;
    gap: 25px;
    padding: 25px;
    grid-template-areas:
      "header   header   header   header"
      "stats    stats    stats    stats"
      "chart    chart    chart    activity"
      "chart    chart    chart    tasks";
  }

  .chart {
    grid-row: 3 / 5; /* 跨越两行 */
  }
}

/* 大屏：加入侧边栏 */
@media (min-width: 1440px) {
  .dashboard {
    grid-template-columns: 250px repeat(3, 1fr);
    grid-template-areas:
      "sidebar  header   header   header"
      "sidebar  stats    stats    stats"
      "sidebar  chart    chart    activity"
      "sidebar  chart    chart    tasks";
  }

  .sidebar {
    display: block; /* 在小屏幕上隐藏 */
    grid-area: sidebar;
    background-color: #263238;
    color: white;
  }
}

性能优化技巧

避免过度使用 auto-fit/auto-fill

虽然 auto-fit 和 auto-fill 很方便，但计算密集型。对于大量元素，考虑使用固定的断点：

css

/* ❌ 可能影响性能（1000+ 项目） */
.huge-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ✅ 更好的性能 */
.huge-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 1024px) {
  .huge-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1440px) {
  .huge-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

使用 auto-fit/auto-fill 与最大列数结合

css

.grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: 1400px; /* 限制最大宽度，避免列过宽 */
  margin: 0 auto;
}

惰性加载网格内容

对于大型网格，考虑惰性加载：

html

<div class="gallery">
  <img loading="lazy" src="photo1.jpg" alt="Photo 1" />
  <img loading="lazy" src="photo2.jpg" alt="Photo 2" />
  <!-- 更多图片 -->
</div>

常见响应式模式

模式 1：单列到多列

最简单的模式：手机单列，桌面多列。

css

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

模式 2：侧边栏切换

侧边栏在手机上移到底部，桌面上在侧边。

css

.layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "header  header"
      "main    sidebar"
      "footer  footer";
  }
}

模式 3：非对称网格

桌面上使用非对称布局，手机上对称。

css

.asymmetric {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 1024px) {
  .asymmetric {
    grid-template-columns: 2fr 1fr;
    /* 主要内容占 2 份，侧边占 1 份 */
  }
}

模式 4：圣杯布局

经典的三列布局，完美响应式。

css

.holy-grail {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "nav"
    "aside"
    "footer";
}

@media (min-width: 768px) {
  .holy-grail {
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "header header"
      "nav    main"
      "aside  main"
      "footer footer";
  }
}

@media (min-width: 1024px) {
  .holy-grail {
    grid-template-columns: 200px 1fr 250px;
    grid-template-areas:
      "header header  header"
      "nav    main    aside"
      "footer footer  footer";
  }
}

调试响应式布局

使用浏览器开发工具

现代浏览器提供了强大的 Grid 调试工具：

Chrome/Edge DevTools：
- 检查元素
- 在 Styles 面板中，Grid 容器旁边有一个网格图标
- 点击图标显示网格线和区域
- 可以显示网格线编号、区域名称等
Firefox DevTools：
- 检查元素
- Layout 面板有 Grid 部分
- 可以显示多个网格，高亮显示区域
- 非常适合调试复杂布局

添加视觉辅助

在开发时，添加边框和背景色帮助理解布局：

css

/* 开发时的视觉辅助 */
.grid {
  background-color: #f0f0f0;
}

.grid > * {
  border: 2px dashed #ff9800;
  background-color: rgba(33, 150, 243, 0.1);
}

响应式测试清单

测试你的响应式 Grid 时，检查：

在最小屏幕（320px）上是否可用？
在常见手机尺寸（375px、414px）上是否美观？
在平板尺寸（768px、1024px）上布局是否合理？
在桌面尺寸（1280px、1920px）上是否充分利用空间？
在超宽屏（2560px+）上是否有最大宽度限制？
横屏（landscape）模式下是否正常？
触摸目标（按钮等）是否足够大（最小 44×44px）？
间距在不同屏幕上是否合适？

总结

响应式 Grid 布局是现代 Web 开发的核心技能。让我们回顾关键要点：

自动响应式：

repeat(auto-fit, minmax(最小值, 1fr))：最常用的自动响应式模式
auto-fit：收缩空列，让项目扩展
auto-fill：保留空列，保持列宽一致
完全不需要媒体查询

媒体查询控制：

改变列数：最基础的响应式策略
重新定义模板区域：改变整体布局结构
调整元素跨度：让特定元素在不同屏幕占据不同空间
精确控制每个断点的表现

容器查询：

基于容器大小而非视口大小
真正可重用的组件
现代浏览器广泛支持

最佳实践：

移动优先：从小屏幕开始设计
使用语义化断点：基于内容而非设备
保持间距一致：使用 CSS 变量管理间距
测试真实设备：不只是浏览器模拟器
性能优先：避免过度嵌套和复杂计算

响应式 Grid：适配所有设备的网格布局 ​

自动响应式布局 ​

auto-fit 和 auto-fill ​

auto-fill：填充尽可能多的列 ​

auto-fit：收缩空列 ​

什么时候用哪个？ ​

minmax() 创建灵活的列 ​

实际应用：卡片网格 ​

使用媒体查询的精确控制 ​

改变列数 ​

改变布局结构 ​

改变元素跨度 ​

容器查询（Container Queries） ​

基础用法 ​

实际应用：可重用组件 ​

响应式图片画廊 ​

响应式仪表板 ​

性能优化技巧 ​

避免过度使用 auto-fit/auto-fill ​

使用 auto-fit/auto-fill 与最大列数结合 ​

惰性加载网格内容 ​

常见响应式模式 ​

模式 1：单列到多列 ​

模式 2：侧边栏切换 ​

模式 3：非对称网格 ​

模式 4：圣杯布局 ​

调试响应式布局 ​

使用浏览器开发工具 ​

添加视觉辅助 ​

响应式测试清单 ​

总结 ​

响应式 Grid：适配所有设备的网格布局

自动响应式布局

auto-fit 和 auto-fill

auto-fill：填充尽可能多的列

auto-fit：收缩空列

什么时候用哪个？

minmax() 创建灵活的列

实际应用：卡片网格

使用媒体查询的精确控制

改变列数

改变布局结构

改变元素跨度

容器查询（Container Queries）

基础用法

实际应用：可重用组件

响应式图片画廊

响应式仪表板

性能优化技巧

避免过度使用 auto-fit/auto-fill

使用 auto-fit/auto-fill 与最大列数结合

惰性加载网格内容

常见响应式模式

模式 1：单列到多列

模式 2：侧边栏切换

模式 3：非对称网格

模式 4：圣杯布局

调试响应式布局

使用浏览器开发工具

添加视觉辅助

响应式测试清单

总结