应优先用fr单位并配grid-auto-columns统一隐式列行为；混用fr与auto、row dense干扰布局、子项min-width覆盖轨道分配、display:contents破坏隐式轨道均为常见原因。
grid-template-columns 用固定值还是 fr 单位？
隐式网格行/列大小不一，八成是因为显式定义和隐式生成没对齐。显式用 grid-template-columns: 1fr 2fr，但新项溢出后进隐式列，默认按 auto 或 min-content 算宽——跟 fr 完全不是一回事。
解决方法很直接：用 grid-auto-columns 显式接管隐式列行为。
-
grid-auto-columns: 1fr让所有隐式列也按等分逻辑伸缩（需配合容器有明确宽度） -
grid-auto-columns: 200px强制所有隐式列宽 200px，适合卡片类布局 - 别混用：
grid-template-columns: 1fr+grid-auto-columns: auto是典型翻车组合，第一列自适应，后面全按内容撑开
grid-auto-flow: row vs row dense 会影响隐式轨道尺寸吗？
不影响尺寸计算本身，但影响“哪些项触发隐式生成”，间接导致视觉上列宽忽大忽小。
比如 grid-auto-flow: row 严格按顺序填，空缺留白；而 grid-auto-flow: row dense 会把小项目往前塞，可能让某列突然多出一个窄项，浏览器按该列所有子项最大 min-width 重算列宽——看起来就像“这列变窄了”。
立即学习“前端免费学习笔记（深入）”；
- 调试时先切回
row看是否还抖动，排除 dense 的干扰 -
row dense不该用来“修宽度”，只用于优化空白，且必须配合grid-column手动定位才可控 - 如果用了
minmax(200px, 1fr)这类函数，dense 模式下不同列的1fr分配基数可能不同，进一步放大差异
子元素 width / min-width 设置会覆盖网格轨道分配吗？
会，而且优先级高到让人忽略。即使你设了 grid-auto-columns: 1fr，只要某个子项写了 width: 300px 或 min-width: 250px，它所在的列就会被撑开，相邻列自动压缩——其他列跟着“被迫变形”。
- 检查子项是否带
width、min-width、flex-basis（如果子项是 flex 容器）、或图片等替换元素的固有尺寸 - 通用防御写法：
* > * { min-width: 0; }（慎用，仅限网格直系子项） - 更稳妥的是在子项上加
overflow: hidden或max-width: 100%，尤其处理文本或图片时
display: contents 对隐式网格有影响吗？
有，而且是静默破坏型。给子项设 display: contents 后，它不再生成盒子，它的子节点直接冒泡到网格上下文里——等于“少了一层包裹”，原本属于该子项的 grid-column 等声明失效，浏览器重新按新层级关系生成隐式轨道，尺寸自然错乱。
- Chrome DevTools 里看 computed layout，如果发现某列轨道数对不上 item 数，先搜
contents - 替代方案：用
visibility: collapse（表格场景）或包装一层div控制显隐，别用contents偷懒 - 目前没有浏览器能正确把
display: contents子节点的grid-area映射回父网格，这是规范未明确定义的灰色地带
真正麻烦的不是怎么设 grid-auto-columns，而是隐式轨道尺寸一旦被子项的 min-width、display 属性或 dense 模式扰动，就很难靠单一规则拉齐——得一层层查渲染树里谁偷偷改了基线。
