直接用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))可实现真正响应式画廊列数，无需媒体查询或js；minmax(280px, 300px)会卡死弹性导致留白或溢出，而1fr是参与剩余空间分配的弹性信号；auto-fit丢弃空轨道使列宽均分填满，auto-fill则保留槽位适合九宫格；图片需max-width: 100%、文字需overflow-wrap: break-word，且父容器须确保width: 100%和box-sizing: border-box。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能实现真正随屏幕宽度变化的画廊列数，不需要媒体查询、不改 HTML、也不靠 JS ——但前提是图片不撑破网格项，且父容器宽度可被准确读取。
为什么 minmax(280px, 1fr) 不能写成 minmax(280px, 300px)
写死上限会卡死弹性：比如 minmax(280px, 300px) 表示每列必须落在 280–300px 之间，小屏下若容器宽 500px，浏览器只能塞两列（2×280=560 > 500），结果降为一列，但宽度又被锁在 280–300px，导致留白或溢出。而 1fr 是弹性兜底，表示“有空间就分”，小屏下自动退化为单列占满。
-
minmax(280px, 1fr)中的1fr不是固定值，而是参与剩余空间分配的信号 - 旧版 Safari 对
minmax(px, fr)支持不稳定，可加-webkit-前缀或降级为minmax(280px, max-content)（但后者易溢出） - 别混用
%和fr：如minmax(30%, 1fr)会被忽略整条规则
auto-fit 和 auto-fill 到底该选哪个
画廊类内容驱动型布局一律用 auto-fit；它会丢弃空轨道，让有图的列拉伸填满整行。而 auto-fill 会预留所有可能列位，哪怕只有一张图，也会在右侧留下大片空白。
- 用
auto-fit：卡片数量不确定、移动端优先、希望列宽随内容动态均分 - 用
auto-fill：九宫格、仪表盘等需固定槽位的场景，且你明确控制子项数量 - DevTools 的 Layout 面板勾选 “Show line numbers”，能直观看到哪些轨道被
auto-fit合并了
图片撑破网格？先查这三处硬伤
写了正确的 minmax() 却还是错位、横向滚动、高度不齐——问题几乎全出在子项自身，Grid 只负责分配轨道，不管内容怎么撑。
-
<img>必须加max-width: 100%和height: auto，否则默认按原始尺寸渲染 - 卡片容器若用了
display: flex，内部子项默认有min-width: auto，得显式写min-width: 0 - 文字没处理换行：
overflow-wrap: break-word或word-break: break-word缺一不可
小屏下仍显示多列？不是 Grid 错了，是容器被截了
常见假象：桌面正常、手机上还是两列甚至三列。实际是父容器被 max-width、padding 或外层 flex 挤压，Grid 算出来的“可用宽度”远大于视口宽度。
- 检查父容器是否漏了
width: 100%或box-sizing: border-box - 避免外层有
white-space: nowrap，它会让整个 Grid 容器宽度异常膨胀 - gap 太大也会挤占列宽：比如
gap: 40px在 320px 宽屏幕上，两列所需最小宽度 = 2×280 + 40 = 600px，根本塞不下
真正难的不是写出那行 repeat(auto-fit, minmax())，而是确保从图片、文字到外层容器，每一环都不偷偷破坏 Grid 的计算前提。一旦某处设了 width: 200px 或 float: left，整个响应逻辑就失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
