响应式网格布局：让多列 HTML 内容在移动设备上自动转为单列显示-html教程-PHP中文网

响应式网格布局：让多列 HTML 内容在移动设备上自动转为单列显示

本文介绍如何使用 CSS Grid 的 auto-fit 与 minmax() 实现响应式图片卡片组，在桌面端多列布局、移动端自动回退为单列，无需 JavaScript 即可优雅适配不同屏幕宽度。

本文介绍如何使用 css grid 的 `auto-fit` 与 `minmax()` 实现响应式图片卡片组，在桌面端多列布局、移动端自动回退为单列，无需 javascript 即可优雅适配不同屏幕宽度。

在构建技术博客、产品展示页或仪表板时，常需将多个并列内容（如设备模块图+说明）以网格形式呈现。但原始代码中硬编码的 grid-template-columns: 1fr 1fr 1fr 会导致小屏下内容严重挤压甚至横向溢出。理想的解决方案是利用现代 CSS Grid 的响应式能力，让列数随容器宽度自动伸缩，最终在窄屏（如手机）下自然退化为单列。

核心实现依赖两个关键特性：

repeat(auto-fit, minmax(MIN, MAX))：
- minmax(450px, 2fr) 表示每列最小宽度为 450px，最大可占据 2fr（即剩余空间的 2 份）；
- auto-fit 会在可用空间不足时自动折叠空列，使所有项目按需换行，而非强行撑开网格；
配合 justify-content: center 可确保单列时内容居中，视觉更整洁。

以下是优化后的完整代码（已移除内联样式冗余，推荐提取为外部 CSS）：

<style>
.container {
  display: grid;
  gap: 10px;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(450px, 2fr)));
}

figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
}

figure img {
  max-width: 100%;
  height: auto;
}

figure figcaption {
  margin-top: 8px;
  text-align: center;
  font-size: 0.9em;
}
</style><div class="container">
  <figure>
    @@##@@
    <figcaption><a href="#tdc">Photon counting and tagging, precision 55ps, adj threshold, hysteresis</a></figcaption></figure><!-- 其余 5 个 figure 保持结构一致 -->
</div>

✅ 关键优势说明：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

无需媒体查询即可响应：auto-fit + minmax() 天然支持流式断点，比手动写 @media (max-width: 768px) 更简洁、可维护性更高；
移动端默认单列：当视口宽度 minmax(450px, ...) 无法满足最小列宽，Grid 自动渲染为 1 列；
桌面端智能分栏：在 ≥900px 宽度下可显示 2 列，≥1350px 下显示 3 列，依此类推，充分利用空间；
语义清晰：仍使用标准结构，无障碍访问与 SEO 友好。

⚠️ 注意事项：

避免在 minmax() 中使用 fr 单位作为最小值（如 minmax(1fr, 2fr)），这将导致计算失效——min 必须是固定或 max-content 等确定值；
若需严格控制最小列数（如至少 2 列），应改用 auto-fill 并配合 min-width 容器约束；
Blogger 等平台可能过滤部分 CSS 属性，建议优先将样式放入标签而非内联 style=""。