grid-template-columns: auto 不起作用，因 auto 在 Grid 中等价于 minmax(min-content, max-content)，仅适配内容固有尺寸而不分配剩余空间；需用 fr 或 minmax() 配合 auto-fit/auto-fill 实现流式响应式布局。
grid-template-columns: auto 为什么不起作用
直接写 grid-template-columns: auto 不会像 Flex 那样让子项自动撑开或等宽排列，因为 auto 在 Grid 中不是“自适应内容宽度”的快捷写法，而是等价于 minmax(min-content, max-content) —— 它只保证不溢出内容，但不会主动分配剩余空间。
-
auto列宽由其内部内容的固有尺寸决定，不响应容器宽度变化 - 如果所有列都设为
auto，Grid 就不会做任何“流式”伸缩，容易出现横向滚动或内容挤在一起 - 真正想实现 Flex 那种“尽可能平均分、内容多的略宽”，得用
fr单位或minmax()组合
用 grid-template-columns: repeat(auto-fit, minmax(…)) 实现流式换行
这是最接近 Flex flex-wrap 行为的 Grid 写法，核心是让列宽有弹性下限 + 自动填满可用空间。
-
minmax(200px, 1fr)表示每列至少 200px，剩余空间平分；1fr是关键，它让列能伸缩 -
auto-fit会让空轨道被折叠，实际列数随容器宽度动态变化；换成auto-fill会保留空轨道（可能影响对齐） - 必须配合
justify-content: stretch（默认值），否则小屏下可能留白
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))); gap: 12px;
grid-auto-flow: column 会破坏流式体验
有人想模仿 Flex 的“主轴方向流动”，误设 grid-auto-flow: column，结果子项垂直堆叠、换行失效——Grid 的流式换行靠的是列定义数量变化，不是靠 grid-auto-flow 控制方向。
-
grid-auto-flow: column会让 Grid 按列优先填充，破坏水平阅读顺序，且无法配合auto-fit做响应式列数调整 - 保持默认
row，靠grid-template-columns和gap控制布局节奏更可控 - 若真需列优先布局（如时间轴），应显式定义行高 +
grid-auto-rows，而非依赖auto-flow: column
内容高度不一致时，grid-row-start 可能导致错位
Grid 默认按轨道对齐，当某格内容特别高，又没设 align-items 或 justify-items，相邻格会出现视觉断层，看起来像“换行错乱”。
- 加
align-items: start让所有格顶部对齐，比默认的stretch更符合流式预期 - 避免在子项里用
margin-bottom模拟间隔，改用gap—— 后者不会影响轨道计算 - 如果某格需要跨行（比如 banner 占两行），必须用
grid-row: span 2，不能靠内容高度“撑开”，否则其他格会错位
Grid 的“流式”不是靠模拟 Flex 行为，而是用 auto-fit + minmax() 让列数可变、列宽可伸缩。最容易忽略的是：没有 gap 时子项紧贴，有 gap 时轨道尺寸会包含间隙，这直接影响 minmax() 的计算基准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
