grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))) 表示容器按最小200px、弹性均分原则生成列轨道，auto-fill保留空轨道以维持等宽对齐，避免auto-fit合并空轨导致拉伸；禁用grid-auto-flow: column以防破坏阅读流与无障碍语义；gap与justify-content叠加易致末行偏移，推荐容器margin: 0 auto或接受左对齐；IE11不支持auto-fill，应通过@supports优雅降级。
grid-template-columns: repeat(auto-fill, minmax(...)) 是什么逻辑
它不是“自动换行”，而是让 Grid 容器根据子项最小宽度和容器剩余空间，动态计算能塞下几个轨道。关键在 auto-fill 和 minmax() 的配合：前者保证空轨道也生成（即使没内容），后者定义每个轨道的弹性范围。
常见错误是写成 auto-fit 却期望填满整行——auto-fit 会合并空轨道，导致最后一行项目被拉宽；而流式列表通常要保持所有项目等宽、对齐，必须用 auto-fill。
-
minmax(200px, 1fr)表示：每个列轨道至少 200px，有富余空间时均分（1fr） - 容器宽度不足 200px 时，单个轨道也会收缩到
minmax的最小值，不会溢出 - 若设
minmax(200px, 2fr)，多出来的空间会按比例分配，但通常不需要——等宽才是流式列表的默认预期
为什么 grid-auto-flow: column 会让布局“错乱”
默认 grid-auto-flow 是 row，意味着新项目从左到右、换行向下填。一旦改成 column，项目就变成从上到下、换列向右填——这会打乱 HTML 顺序的视觉流，尤其在响应式下容易出现“第一列很长、第二列很短”的断裂感。
真实场景中，除非明确要做瀑布流（且用 grid-auto-flow: dense 配合 grid-row-end 手动调度），否则别碰 column。流式列表本质是行优先的阅读习惯，row 才符合直觉。
- 用了
grid-auto-flow: column后，grid-column-start等定位可能失效或行为异常 - 屏幕变窄时，列数减少，但内容仍按列堆叠，导致高度不可预测，影响滚动体验
- 无障碍阅读器会按 DOM 顺序读取，但视觉顺序已错位，造成语义脱节
gap 和 justify-content 搭配时的对齐陷阱
gap 控制轨道间距，justify-content 控制整行轨道在容器内的对齐方式。两者叠加时，容易误以为 justify-content: center 能让“每行居中”，其实它只对当前行所有轨道组成的整体生效——如果最后一行项目数少，它的总宽度小，center 就会让这行明显偏右（或偏左），破坏网格对齐感。
真正稳定的方案是放弃 justify-content，改用 margin: 0 auto 包裹 Grid 容器，或确保容器宽度始终是轨道宽度的整数倍（靠 JS 或媒体查询微调）。但最省事的是：接受最后一行左对齐，这是流式布局的天然特征。
-
justify-content: space-between在最后一行会导致项目间距异常拉大 -
gap值过大（如2rem）在小屏下会挤压项目可用宽度，触发更早换行 - 如果项目内含图片，记得给
img加width: 100%; height: auto;，否则gap可能被撑开
IE11 兼容不了 auto-fill？用 @supports 做降级更靠谱
IE11 完全不支持 repeat(auto-fill, ...)，但直接回退到 flex-wrap 并不总是等价：Flex 的“流式”依赖项目自身宽度，Grid 则由容器统一调度轨道。硬切会丢失对齐精度和响应一致性。
更务实的做法是用 @supports 检测 display: grid 和 grid-template-columns，只在支持的浏览器启用 Grid 布局；不支持时用简单 float 或 inline-block 模拟基本流式，不强求对齐完美。
- 别用
display: -ms-grid写 IE 专用语法——它不支持auto-fill，且维护成本高 -
@supports (display: grid) and (grid-template-columns: repeat(2, 1fr))是较稳妥的检测写法 - 降级样式里避免用
calc()计算宽度，IE11 对它的支持不稳定
流式排列真正的复杂点不在语法，而在“最后一行是否要撑满”“小屏下要不要强制单列”“项目高度不一致时要不要均衡”——这些都不是 Grid 一条声明能解决的，得结合业务场景做取舍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
