本文介绍使用 CSS Grid 的 repeat(auto-fit, minmax()) 技术，配合媒体查询或响应式单位，实现多图/多卡片布局在窄屏（如手机）下无缝退化为垂直单列，兼顾桌面端的多列展示与移动端的可读性。

本文介绍使用 css grid 的 `repeat(auto-fit, minmax())` 技术，配合媒体查询或响应式单位，实现多图/多卡片布局在窄屏（如手机）下无缝退化为垂直单列，兼顾桌面端的多列展示与移动端的可读性。

在响应式网页设计中，将多列内容（如产品图册、功能模块卡片）在桌面端以网格形式呈现，而在手机等窄屏设备上自动堆叠为单列，是提升用户体验的关键实践。原问题中的 <div class="container"> 使用了 <code>display: inline-grid 且硬编码三列布局，导致小屏幕出现横向滚动或内容挤压——这正是典型的非响应式陷阱。

推荐方案：CSS Grid + auto-fit 自适应列数

核心技巧在于用 grid-template-columns: repeat(auto-fit, minmax(min-width, max-width)) 替代固定列数。它能根据容器宽度动态计算最优列数，并在空间不足时自然收缩为单列：

.container {
  display: grid;
  gap: 10px;
  justify-content: center;
  /* 每列最小450px，最大占剩余空间的2份；窄屏下自动变为1列 */
  grid-template-columns: repeat(auto-fit, minmax(450px, 2fr)));
}

✅ 为什么选 auto-fit 而非 auto-fill？

立即学习“前端免费学习笔记（深入）”；

生成HTML格式PPT

从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。

下载

• auto-fill 会保留所有空轨道（即使无内容），可能导致意外空白；
• auto-fit 在布局后自动折叠空列，使剩余空间被有效分配，更符合“单列优先”的移动体验。

? 增强移动端体验的补充建议：

1. 添加断点媒体查询（更精细控制）：

   @media (max-width: 768px) {
     .container {
       grid-template-columns: 1fr; /* 强制单列 */
       padding: 0 12px;
     }
     figure img {
       width: 100%;
       max-width: 320px;
       height: auto;
     }
   }

2. 确保 <figure></figure> 内部居中对齐（已包含在示例中）：

   figure {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
   }

? 注意事项：

• 避免在 style 属性中混用 =（如 gap=10px），应为 gap: 10px;（原代码存在语法错误）；
• 图片 width 属性（如 width="200"）会覆盖 CSS 设置，建议移除内联 width，统一由 CSS 控制尺寸；
• minmax(450px, 2fr) 中的 450px 可根据实际内容调整（例如手机常见视口宽度为 375px 或 414px），若希望更早触发单列，可设为 300px 或 min(300px, 100vw)；
• 若需兼容旧版 Safari（-webkit- 前缀或降级为 Flexbox 方案。

最终效果：桌面端自动填充 2–3 列（取决于视口），平板适配 2 列，手机（≤768px）强制单列且图片居中、文字清晰可读——无需 JavaScript，纯 CSS 实现优雅降级。