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

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

本文介绍如何使用 CSS Grid 的 auto-fit 与 minmax() 实现响应式图像卡片布局，使桌面端多列展示的组合在小屏幕下无缝退化为垂直单列，无需 JavaScript，兼容现代浏览器。

本文介绍如何使用 css grid 的 `auto-fit` 与 `minmax()` 实现响应式图像卡片布局，使桌面端多列展示的 `

` 组合在小屏幕下无缝退化为垂直单列，无需 javascript，兼容现代浏览器。

在构建技术博客、产品图册或仪器文档页面时，常需以网格形式并排展示多个带标题的图像（如 SPI 仪器模块示意图）。但默认的多列布局在手机等窄屏设备上极易出现横向溢出、文字折行混乱或图片挤压失真等问题。理想的解决方案是：在宽屏保持多列紧凑排列，在窄屏自动切换为语义清晰、易于滑动的单列流式布局——这正是 CSS Grid 响应式能力的核心价值。

实现该效果的关键在于放弃固定列数（如 1fr 1fr 1fr），改用动态网格模板：

grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)));

minmax(450px, 1fr) 表示：每列最小宽度为 450px（确保图文可读），最大可占据剩余空间的等分份额（1fr）；
auto-fit 会根据容器宽度自动计算可容纳的列数，并在空间不足时将空列完全收缩消失，迫使后续项目换行，最终在移动端自然堆叠为单列；
相比 auto-fill，auto-fit 更适合内容数量不固定或需严格避免空白列的场景。

同时，为保障

内部结构一致性，建议添加基础样式重置：

figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0; /* 移除浏览器默认外边距 */
}

完整应用示例如下（已优化内联样式为更可维护的结构）：

HTML Text Extract

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

下载

<div class="instrument-grid">
  <figure>
    @@##@@
    <figcaption><a href="#tdc">Photon counting and tagging, precision 55ps...</a></figcaption></figure><!-- 其余 5 个 figure 项（略） -->
</div>

<style>
.instrument-grid {
  display: grid;
  gap: 10px;
  justify-content: center;
  padding: 0 12px; /* 为移动端预留安全边距 */
}

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

/* 响应式核心规则 */
.instrument-grid {
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)));
}

/* 可选：针对超小屏进一步微调最小宽度（如 iPhone SE） */
@media (max-width: 480px) {
  .instrument-grid {
    grid-template-columns: 1fr;
  }
}
</style>

⚠️ 注意事项：

auto-fit / auto-fill 仅在显式声明 display: grid 时生效，inline-grid 不支持响应式重复轨道；
图片 width 属性建议保留（如 width="200"），或统一用 img { max-width: 100%; height: auto; } 防止拉伸；
若需支持 iOS Safari 15.4 以下版本，请测试 minmax() 兼容性，必要时回退至 @supports 特性查询方案；
中的链接锚点（如 #tdc）在单列模式下依然有效，用户可直接跳转至对应章节，语义完整性不受影响。