直接用repeat(auto-fit, minmax(240px, 1fr))可实现无缝切换，但必须全局设box-sizing: border-box、图片加width: 100%、gap与子项约束协同，否则小屏易错位、溢出或留白。
直接用 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) 搭配严格约束的子项，就能实现真正可用的无缝切换；但只要漏掉 box-sizing: border-box、图片没设 width: 100% 或 gap 单独使用，网格立刻错位、撑破或留白。
为什么 auto-fit + minmax() 在小屏上突然错位
常见现象是 iPhone 上卡片缩成一列，但文字换行异常、图片溢出、最后一行留白。这不是 Grid 写错了，而是内容在“最小宽度”下被强行挤压：
-
minmax(280px, 1fr)在 375px 宽的 iPhone SE 上试图塞两列 → 每列理论宽仅 187.5px，低于 280px 下限，浏览器放弃均分，转而压缩内容（如拉伸图片、截断文字） - 没设
box-sizing: border-box，导致 padding/margin 吃掉轨道可用宽度，minmax()实际生效空间缩水 - 卡片内
<img alt="HTML页面响应式布局的无缝切换技巧" >缺width: 100%; height: auto;，原始尺寸顶开网格项高度，破坏行对齐
gap 和 box-sizing 必须成对出现，不能只写 gap
gap 不是视觉装饰，它参与网格轨道计算。如果容器没设 box-sizing: border-box，padding 会额外占空间，总宽超限，列数骤减甚至触发横向滚动条。
- 务必在网格容器上加：
box-sizing: border-box;（全局重置也行） -
gap值建议分层：手机端12px，平板16px，桌面24px—— 避免统一写gap: 20px或gap: 1rem（rem 会随根字体缩放，打乱网格节奏） - IE10+ 兼容需用
grid-column-gap和grid-row-gap替代gap，否则可能塌陷空白列
图片和文字必须主动退让，不能指望 Grid 拦着
Grid 只分配轨道，不控制内容边界。崩坏点几乎全在子项自身：
立即学习“前端免费学习笔记（深入）”；
-
<img alt="HTML页面响应式布局的无缝切换技巧" >必须加max-width: 100%; height: auto;，否则按原始尺寸渲染 - 长单词（如 URL、技术名词）加
overflow-wrap: break-word;，否则溢出容器 - 卡片内若含 Flex 容器，其子项默认有
min-width: auto，得显式写min-width: 0;防止拉伸 - 统一用
aspect-ratio: 4/3锁定图形单元比例；旧 Safari 可套一层<div style="overflow: hidden"> <h3>什么时候该切媒体查询，而不是硬调 minmax()</h3> <p><code>minmax()解决的是平滑缩放列数，但列数突变（如 4→1）、卡片内堆叠顺序调整、gap大幅缩减，这些必须靠媒体查询干预。- 别在
@media (max-width: 480px)里写display: block—— 这等于放弃 Grid，卡片失去对齐基准 - 关键断点只做三件事：
grid-template-columns: repeat(1, 1fr)、gap: 12px、order调整（如让标题在图下方） - 避免用
minmax(100px, 1fr)强行保多列，小屏下内容会被压扁；该切就切，不硬撑
真正难的不是写出那行
repeat(auto-fit, minmax())，而是所有子项都得“守规矩”：不抢空间、不锁尺寸、不绕过box-sizing: border-box。一旦某张图漏了max-width，或某个标题忘了overflow-wrap，整个网格的“无缝感”就从那个点开始撕裂。 - 别在
