grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 实现列数自适应，核心是 auto-fit 合并空轨道、minmax 约束每列≥250px且≤其1fr份额，非二选一；最小值忌用em/rem，推荐clamp；子项禁设固定宽/脱离流/未处理长文本；小屏列数不变需查最小值是否超可用宽或gap/父容器挤压。
直接写 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能实现列数随容器宽度自动增减，不需要媒体查询，但必须理解它怎么算——否则容易写出“看着动、实际卡死”的假响应式。
为什么 minmax(250px, 1fr) 不是“最小 250px 或最大 1fr”
它实际表达的是：该轨道宽度必须 ≥ 250px，且 ≤ 它按 1fr 应得的那份剩余空间。浏览器不是在两个值之间选一个，而是在满足下限的前提下，把多出来的空间按比例分给所有有内容的列。
- 容器宽 900px → 最多塞 3 列（3 × 250px = 750px ≤ 900px），剩余 150px 均分 → 每列 350px
- 容器宽 200px → 连一列都塞不下，降级为单列，宽度就是 200px（此时
1fr生效，占满） - 把
1fr换成auto或max-content：列宽失去弹性约束，auto-fit失效，网格可能塌成一列或横向溢出 - 最小值别用
em或rem：字体缩放会干扰列数计算；更稳的是clamp(160px, 25vw, 300px)
auto-fit 和 auto-fill 的行为差异直接影响布局是否“干净”
auto-fit 会合并空轨道（即没有子元素的列），auto-fill 则保留所有符合 minmax() 条件的轨道，哪怕没内容也会留白。
- 卡片列表、底部导航栏等“内容驱动”场景，一律用
auto-fit：避免小屏下右侧大片空白，也防止子项少时列数虚高 -
auto-fill更适合需要“预留槽位”的场景，比如仪表盘固定格子数、拖拽区域占位 - 嵌套网格中若用
auto-fill，子网格可能撑破父容器，尤其当父网格用了fit-content()或固定px宽度时 - DevTools 的 Layout 面板里勾选 “Show line numbers”，能直观验证轨道是否被合并
子项样式会悄悄破坏 auto-fit 的计算逻辑
即使 grid-template-columns 写对了，子项一旦加了固定尺寸或脱离文档流，auto-fit 就会失效。
立即学习“前端免费学习笔记（深入）”；
- 子项设
width: 200px或flex: 0 0 200px：会强行撑开列宽，导致换行错乱或横向溢出 - 子项用了
float、position: absolute或包裹在display: flex容器里：Grid 轨道计算中断，降级为普通块级流 - 子项内文字过长未处理：默认不折行，可能撑破最小宽度限制；建议加
overflow-wrap: break-word - 嵌套网格时，确保子网格的直接父容器也设了
display: grid，不能夹一层div+display: flex
移动端列数没变？先检查 minmax 的最小值是否合理
小屏下列数不变，大概率不是 Grid 写错了，而是最小宽度设得比实际可用空间还大，或者被其他样式挤占了空间。
- 检查
gap：它参与可用宽度计算。例如容器宽 400px，设gap: 20px，三列就要吃掉 40px 间隙，实际每列可用空间只剩约 120px —— 远低于minmax(250px, 1fr)的下限 - 检查父容器约束：
max-width、padding、inline-block等都会压缩 Grid 容器的可用宽度 - 检查是否混用了 Flex：Grid 容器外层是 Flex 时，
align-items: baseline等设置可能干扰子项高度，间接影响行高计算和换行判断 - 真要精确控列数上限/下限，别硬改
repeat()，用@media覆盖最小值更可靠，例如小屏改用minmax(180px, 1fr)
真正难的不是写出这行 CSS，而是理解 auto-fit 在渲染阶段会丢弃空轨道，而 minmax() 的第一个参数决定了“何时开始丢”。很多问题其实出在最小宽度设得比内容还窄，或者忘了加 gap 导致视觉拥挤，误以为是列数没变。
