auto-fit + minmax() 是起点而非终点，因它仅分配轨道宽度，不约束内容；漏掉 gap、aspect-ratio、图片尺寸控制或 box-sizing: border-box 中任一环，就会导致错位、拉伸、留白或布局跳动。
直接用 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) 就能跑通，但漏掉 gap、aspect-ratio 或图片尺寸控制中的任意一环，网格就会错位、拉伸或留白——这不是 Grid 写错了，而是子项没“守规矩”。
为什么 auto-fit + minmax() 是起点，不是终点
这个写法只分配轨道宽度，不管内容是否溢出。常见崩坏点都在图片和容器自身：
-
minmax(240px, 1fr)要求每列 ≥240px，但若图片原始宽高比失控，会强行撑开网格项高度，导致换行错位或横向滚动 - 卡片内没设
box-sizing: border-box，padding/margin 吃掉列宽余量，实际可用空间缩水 - 没配
gap，浏览器按无间距计算轨道，小屏下卡片突然变窄甚至叠在一起 - 父容器写了
max-width: 1200px却没设width: 100%，Grid 实际计算宽度小于视口，小屏仍显示多列
图片必须加三层控制，否则必变形
Grid 不管图片怎么缩放，只管列数和间隙。漏掉任何一层，都会拉伸、压扁或溢出：
- 给每张图的**直接父容器**（如
<figure>）设aspect-ratio: 4/3或aspect-ratio: 1/1，强制维持比例 - 容器内的
<img>必须写width: 100%; height: 100%; object-fit: cover;—— 光写width: 100%; height: auto无法约束高度 -
<img>标签必须显式带width和heightHTML 属性（如<img width="300" height="200">），否则加载时布局跳动（CLS）
gap 和 box-sizing 必须成对出现
gap 参与轨道计算，不是单纯“加空隙”。如果父容器没设 box-sizing: border-box，padding 会额外占空间，总宽超限，列数骤减甚至触发滚动条：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 务必在网格容器上写
box-sizing: border-box;（全局重置也行） -
gap: 12px是手机端安全值；平板升到16px，桌面用24px；避免用gap: 1rem（rem 随根字体缩放，破坏网格节奏） - Safari 15.4 之前不支持
gap在inline-grid上生效，容器必须是display: grid - IE10+ 兼容写法：用
grid-column-gap和grid-row-gap替代gap
小屏错位、单图拉伸、加载跳动，几乎都出在这里
这些问题很少是 Grid 语法错误，而是上下文细节失控：
- 小屏下只显示一列、右边大片空白 →
minmax()第一个值设太大（如300px），iPhone SE 实际可用宽度约340px，减去边距和gap后塞不下两列 - 图片被压扁或高度突兀拉长 → 没给容器设
aspect-ratio，或只写了width: 100%却漏了height: 100%和object-fit - 加载时布局跳动（CLS）→ 图片标签没写
width和heightHTML 属性，浏览器无法预留空间 - Safari iOS 15 及更早版本旋转屏幕后列数不更新 → 需监听
resize事件并强制重绘，或加will-change: transform触发重排
真正难的不是写出那行 repeat(auto-fit, minmax())，而是所有子项都得“守规矩”：不抢空间、不锁尺寸、不绕过 box-sizing: border-box。一旦某张图没设 max-width: 100%，或某个标题忘了 overflow-wrap: break-word，整个网格的“无缝感”就从那个点开始撕裂。
