直接改minmax()最小宽度即可控制列数：值越小列数越多，越大列数越少；必须用auto-fit而非auto-fill避免留白，小屏需配合媒体查询强制单列，并全局设box-sizing: border-box确保计算准确。
直接改 grid-template-columns 里的 repeat(auto-fit, minmax()) 参数就能自由控制列数，不用写媒体查询、不依赖 JS、一行 CSS 解决。
怎么调 column 数：改 minmax 的最小宽度值
列数由容器宽度 ÷ 每列最小宽度自动决定。改小这个最小值，列数就变多；改大，列数就变少。
-
minmax(250px, 1fr)→ 小屏（如 375px 宽）只能塞下 1 列，桌面端大概率 4–5 列 -
minmax(320px, 1fr)→ 同样小屏仍为 1 列，但平板（768px）可能从 2 列变成 1 列（768 ÷ 320 = 2.4 → 取整为 2），桌面端列数减少 - 想在 iPad 上稳定出 3 列？试
minmax(240px, 1fr)（768 ÷ 240 = 3.2 → 自动取 3） - 注意：不能设
minmax(100px, 1fr)这种过小值，否则窄屏也可能强行挤出两列，破坏阅读流
为什么别用 auto-fill 替代 auto-fit
auto-fit 会把空轨道“收掉”，让剩余空间均分给现有列；auto-fill 则保留所有能放下的轨道（哪怕内容为空），容易导致最后一行留白或错位。
- 卡片类布局必须用
auto-fit：确保内容填满整行，避免右侧大片空白 -
auto-fill适合做“占位模板”，比如后台配置面板里预设固定数量的可拖拽区域 - 浏览器渲染行为差异：Safari 对
auto-fill的空轨道处理更保守，Chrome 更激进——同一行代码在不同浏览器可能列数不一致
移动端单列必须显式锁定
auto-fit 不保证 iPhone 小屏一定只出一列。例如容器宽 375px，而你设了 minmax(280px, 1fr)，375 ÷ 280 ≈ 1.34 → 浏览器可能仍尝试塞两列（第二列被压缩到 95px），造成文字折行难读。
- 加一条窄屏媒体查询：
@media (max-width: 480px) { .grid { grid-template-columns: 1fr; } } - 不要只靠
minmax()“期望”它自动退化，这是最常被忽略的兼容性断点 - 如果用
gap，记得同步响应式：比如gap: clamp(0.5rem, 2vw, 1rem)，否则小屏 gap 过大会撑开容器高度
改完列数后卡片对不齐？先查 box-sizing 和 gap
对不齐八成不是 Grid 问题，而是盒模型或间隙逻辑没理清。
- 务必全局设
*, *::before, *::after { box-sizing: border-box; }，否则 padding/border 会让minmax()实际可用宽度变小，列宽计算失准 - 子元素加
margin会和gap叠加，导致最后一行右边/下边多出一倍间距 -
gap是 Grid 原生属性，只作用于轨道之间；margin是元素级，会参与布局流计算——混用必出问题 - IE11 已基本退出主流支持场景；若真要兼容，用
padding在卡片内部模拟间隙，而非降级回 margin 负技巧
真正难的不是算列数，而是让每列的内容高度一致、文字换行可控、图片比例不崩——这些得靠子项自身的 max-width / aspect-ratio / line-clamp 配合，而不是指望 Grid 自动修好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
