真正响应式九宫格靠grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))实现，它使列数随容器宽度自动增减（小屏单列、中屏两列、大屏三列以上），auto-fit合并空轨道避免留白，minmax()确保每列≥250px且弹性均分剩余空间。
grid-template-columns: repeat(auto-fit, minmax()) 是核心
固定写 repeat(3, 1fr) 不是自适应，只是硬塞三列。真正响应式九宫格靠的是浏览器动态算列数：容器够宽就铺三列，窄了自动退成两列甚至一列，且不留白。
关键写法是：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))。其中：
-
minmax(250px, 1fr)表示每列最小 250px，最大按剩余空间均分； -
auto-fit会让空轨道被合并（比如只有 5 个按钮，不会留出 4 个空位）； -
auto-fill则会保留所有可能轨道，小屏下容易右侧大片空白或触发横向滚动； - 第一个参数必须是
<length></length>（如px、rem），禁用em—— 字体缩放会干扰列数计算。
按钮高度不一致？别只靠 grid-auto-rows
设了 grid-auto-rows: 1fr 后按钮还是高低不齐，是因为按钮本身默认是 inline 或 inline-block，不继承网格行高。
必须额外控制按钮容器（即 grid item）和按钮自身：
- 给每个 grid item 加
display: flex; align-items: center; justify-content: center;； - 按钮本身加
min-height: 100%或直接设height: 100%； - 避免在 grid item 上设
padding，它会挤压按钮可用高度； - 若有 SVG 图标，慎用
vertical-align: middle，优先走 flex 居中。
小屏下突然变成两列？不是 bug，是约束被挤破了
repeat(3, 1fr) 在 iPhone SE（375px 宽）或系统字体放大 150% 时塌成两列，很常见。这不是代码错，而是浏览器按子项实际占用宽度判断“能否放下三列”。
原因包括：
- 图片未加载完，高度为 0，Grid 按内容尺寸误判；
-
gap+ 边框 +padding累积误差让三列总宽 > 100%； - iOS 渲染 subpixel 处理导致列宽出现 124.33px 这类非整数值，第三列被迫换行。
更稳的降级方案：grid-template-columns: 33.33% 33.33% 33.34% 配合 grid-auto-rows: minmax(120px, auto)，能堵住浮点误差和加载抖动。
IE11 兼容性怎么处理？别指望 autoprefixer
grid-auto-rows: 1fr 在 IE11 完全无效，PostCSS autoprefixer 也不会为它加前缀 —— 这是规范层面不支持，不是漏转。
若必须兼容 IE11：
- 改用显式声明三行：
grid-template-rows: repeat(3, 33.333%)； - 配合
grid-template-columns: repeat(3, 1fr)； - 若内容动态增减（比如从 6 个变 9 个），CSS fallback 会失效，得用 JS 监听容器高度后手动设按钮
min-height。
现代项目可忽略 IE，但上线前务必在真机上测窄屏临界宽度 —— 最容易翻车的地方，从来不是代码写没写对，而是“它在 375px 宽度下到底有没有撑开第三列”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
