repeat(auto-fit, minmax(250px, 1fr))是响应式九宫格核心，它使列数随容器宽度自动增减（小屏单列、中屏两列、大屏三列以上），而非固定3×3；auto-fit折叠空轨道避免留白，auto-fill则保留空轨道导致小屏空白或滚动，minmax()中250px为最小宽度（需单位），1fr为弹性份额，二者共同确保格子视觉一致且内容驱动。
repeat(auto-fit, minmax()) 是实现响应式九宫格的真正核心，但它不是“让九宫格在所有屏幕都显示 3×3”，而是让列数随容器宽度自动变化——小屏单列、中屏两列、大屏三列甚至四列，同时保持格子视觉一致。硬写 repeat(3, 1fr) 或 33.33% 33.33% 33.34% 只是固定三列，根本不算响应式。
为什么 auto-fit 比 auto-fill 更适合九宫格卡片布局
auto-fit 会折叠空轨道，auto-fill 会保留所有可能轨道（哪怕没内容），导致小屏下右侧大片空白或横向滚动。
- 九宫格通常只有 3–9 个项，内容不总是填满全部格子 → 必须用
auto-fit避免留白 - DevTools Layout 面板勾选 “Show line numbers”，能看到空轨道是否被合并：没合并就是
auto-fill或auto-fit失效了 -
auto-fill适合仪表盘预留插槽，但九宫格是内容驱动型布局，不是结构占位型
minmax() 的两个参数到底控制什么
minmax(280px, 1fr) 不是“最小 280px 或最大 1fr”，而是：该列宽度必须 ≥ 280px，且 ≤ 它按 1fr 应得的那份剩余空间。
- 第一个参数必须是
<length></length>（如px、rem），禁用em—— 字体缩放会干扰列数计算 - 第二个参数只接受
1fr或max-content；写成2fr、auto或minmax(280px, 2fr)会被浏览器静默忽略 - 临界点是：容器宽 ≥ 单列最小宽 × 列数 +
gap总和；低于这个值，列数就会自动减少 - 推荐起始值：
minmax(250px, 1fr)，比280px更适配主流手机窄屏（如 iPhone SE 的 375px）
常见失效原因：写了 auto-fit 却还是只显示一列
不是代码错，而是约束条件被破坏。浏览器按可用行内尺寸计算列数，任何挤压都会让它“算不出第二列”。
- 父容器没设宽度，或外层用了
display: inline-block/float导致宽度塌陷 -
gap过大（比如gap: 40px），窄屏下直接挤占掉可分配空间 - 子元素设了
width: 300px、min-width: 280px或flex: 0 0 250px，强行顶开网格项，破坏minmax()的弹性协商 - 漏写
display: grid，或子项用了position: absolute/float，导致网格定位完全不生效
移动端正方形格子怎么稳住
九宫格常需图片/图标等比例展示，aspect-ratio: 1/1 是最简方案，但要注意兼容性边界。
-
aspect-ratio: 1/1在 iOS 16.4+ 和 Android Chrome 全支持，无需 polyfill - 别用
height: 120px强制等高 —— 截断文字、破坏系统字体缩放 - 用
grid-auto-rows: minmax(120px, auto)：内容少时留白，内容多时延展，不拉扯其他格子 - 容器别加
padding，改用margin: 0 12px控制左右安全区，再配max-width: calc(100vw - 24px)防窄屏溢出
repeat(auto-fit, minmax()) 的响应能力完全依赖父容器的真实宽度和子项的自然流行为。一旦加了固定宽、脱离文档流、或外层宽度塌陷，它就退化成“看着像响应式，实则卡死”。真正的难点不在写法，而在守住这些隐性约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
