IE11等老浏览器不支持grid-template-columns: repeat(auto-fill, minmax())，需用display: inline-block + font-size: 0 + text-align: justify + ::after伪元素实现等分布局，子项用百分比宽度、vertical-align: top，并通过媒体查询模拟minmax断点。
Grid grid-template-columns: repeat(auto-fill, minmax(...)) 在老浏览器里直接失效怎么办
它在 IE11、iOS Safari 9.3 之前、Android Browser 4.4 等环境压根不解析，连 fallback 都不会触发——不是样式错位，是整个布局塌成一列垂直堆叠。
真正能用的平替不是“模拟 Grid”，而是放弃等分布局的幻觉，用 display: inline-block + 容器 font-size: 0 消除间隙，再靠 vertical-align: top 对齐。这不是退化，是换一套约束条件重新设计。
- 必须给父容器设
text-align: justify，并额外加一个伪元素::after { content: ""; display: inline-block; width: 100%; }触发两端对齐（否则最后一行无法撑满） - 子项宽度要用百分比（如
width: 33.33%），不能用minmax()那套弹性逻辑——浏览器不认，也没 JS 补丁能实时重算 - 行高、上下 margin 会干扰基线对齐，所有子项统一加
vertical-align: top，且避免设置line-height
为什么不用 float: left 而坚持 inline-block
float 看似更老派兼容，但它会让父容器高度塌陷，必须清浮动；而清浮动本身在 IE8–IE11 就有多种写法（zoom: 1、::after、overflow: hidden），不同方案在不同场景下会意外截断阴影、溢出内容或破坏滚动条行为。
inline-block 虽然默认有空白符间隙，但这个间隙是可预测、可归零的；而浮动带来的布局污染是隐性的、跨层级的。
立即学习“前端免费学习笔记（深入）”；
- 间隙根源是 HTML 换行符和空格，不是 CSS 本身问题，所以
font-size: 0在父容器上生效即可，子项内再恢复正常font-size - IE8 支持
inline-block，但只支持原生支持该属性的元素（如button,input）；对div需补*display: inline; *zoom: 1（仅 IE7–IE8） - 不要用
letter-spacing: -0.3em清间隙——它会影响子元素内的文字渲染，在中文混排时尤其容易导致字距异常
响应式断点怎么跟 Grid 的 minmax() 对齐
Grid 的 minmax(300px, 1fr) 意思是“每个格子至少 300px，多出来的空间均分”，而 inline-block 只能靠媒体查询硬切：300px 是临界值，就按每行最多放 floor(100% / 300px) 个来算断点。
- 假设容器宽 1200px，
minmax(300px, 1fr)最多放 4 列 → 对应写@media (min-width: 1200px) { .item { width: 25%; } } - 下一个断点看 900px 容器能否塞下 3 个 300px → 写
@media (min-width: 900px) and (max-width: 1199px) { .item { width: 33.33%; } } - 别偷懒写
width: calc(100% / 3)——IE11 不支持calc()在width中带除法，且 Safari 6.1 之前不支持calc()里的 vw/vh 单位
JavaScript 动态增删项时 inline-block 布局突然错行
常见于用 innerHTML 或 appendChild 插入新节点后，新项卡在最后一行末尾、不自动换行。根本原因是 DOM 插入时保留了源码中的换行符和缩进，这些空白符在 inline-block 上仍会生成间隙，导致总宽度超限。
- 插入前把 HTML 字符串用正则清理：
html.replace(/>\s+, '> - 如果用
document.createElement，记得设置el.style.verticalAlign = 'top'，且不要依赖 innerHTML 自动继承父级font-size: 0——某些 IE 版本下动态创建的元素不继承font-size - 避免在容器上用
white-space: nowrap来防间隙——它会让文本不换行，破坏内容可读性
gap 属性没有 inline-block 平替。你得手动给子项加 margin-right 和 margin-bottom，再用负边距抵消最后一列/最后一行的多余外边距——这个细节一旦漏掉，视觉上就会明显偏移。 
