minmax(250px, 300px)不能写死最大值，因浏览器宁可留白也不缩列：容器宽950px时，它只放3列（3×300=900），拒绝将第4列压缩至250px塞入，违背响应式初衷。
minmax() 为什么不能直接写成 minmax(250px, 300px)
写死最大值会让浏览器“宁可留白也不缩列”。比如容器宽 950px，minmax(250px, 300px) 会算出最多放 3 列（3 × 300 = 900），哪怕第 4 列压到 250px 就能塞下，它也不干——因为 250px
真正起弹性作用的是 1fr：它表示“把剩余空间均分给所有有内容的列”，和容器宽度强绑定。浏览器先确保每列 ≥ 最小值，再把多出来的空间按比例摊开。
-
minmax(250px, 1fr)是安全组合；minmax(250px, 300px)是常见翻车点 - 若真要限制上限，用
clamp(250px, 1fr, 320px)替代第一参数更稳 - 最小值别用
em或rem：字体缩放会干扰列数计算
auto-fit 和 auto-fill 的行为差异直接影响布局是否“干净”
auto-fit 会合并空轨道（即没子元素的列），把省下的空间重新分配给现有列；auto-fill 则保留所有符合条件的轨道，哪怕没内容也留白。
卡片、图库这类“内容驱动”的布局，一律用 auto-fit：
立即学习“前端免费学习笔记（深入）”；
- 小屏下不会右侧空一大块
- 子项少时不会虚高列数（比如只有 2 张卡片却显示 4 列）
- 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，中间不能夹一层 display: flex 的 div。
gap 和 justify-content 不是锦上添花，而是必要调节项
没 gap，窄屏下单列会贴边难看；没 justify-content: center，单列不会居中——这些细节不加，auto-fit 算得再准，视觉上也像没调好。
另外，父容器必须是“布局盒”：display: contents 或 display: none 的元素上设 grid，minmax() 就算不出有效宽度。
