先记住这个答案
Grid 可在显式模板之外自动建立轨道。grid-auto-flow: column 改变自动放置的主要推进方向；当现有行位置放不下后续项目时，会向列方向继续，必要时生成隐式列。新列的尺寸由 grid-auto-columns 指定，默认并不是“跟第一列完全一样”。容器宽度变化影响轨道尺寸，但不会自动把这个流向改成 row。
column让放置游标先沿列推进- 项目超出模板时可生成隐式列
- 新增列宽看
grid-auto-columns - 响应式列数仍需合适的模板规则
两行卡片怎样生成新列
假设容器显式定义两行，但没有预先列出所有列。第 1、2 个项目可依次占第一列两行，后续项目继续向右，形成第二列、第三列。这适合横向滚动的标签墙或卡片带。为了避免新列被短标题挤得太窄、长标题撑得太宽，可以为自动列设一个明确尺寸。
.strip {
display: grid;
grid-template-rows: repeat(2, 100px);
grid-auto-flow: column;
grid-auto-columns: 180px;
gap: 12px;
overflow-x: auto;
}
/* 项目持续增加时向右生成 180px 宽的列 */这里新增项目不会因为容器只宽 400px 就自动换成垂直长列表，而是继续产生列，超出的内容通过横向滚动访问。若需求是普通响应式卡片墙，应选用按行流动、配合 repeat(auto-fit, minmax(...)) 等列模板的方案，而不是指望列流向自己折返。
尺寸变化与定位的区别
容器变宽时，带 fr 的显式列或自动列若使用弹性函数，其宽度会重新计算；但明确写出的项目位置和自动放置方向仍遵照当前 CSS 规则。也就是说“轨道变宽”和“项目改到另一列”是两回事。要在断点上改行数、流向或滚动方式，就用媒体查询修改相应属性。
项目如果显式定位到远处的列线，也可能在没有那么多显式列时催生隐式列。排查多出空白区域时，除了看 grid-auto-flow，还要检查子元素的 grid-column 是否越界。
把容器明确设为两行，再连续放入五张普通卡片，按 grid-auto-flow: column 排列：前两张进入第一列两行，接下来的卡片进入后续列。若去掉两行约束，浏览器可以生成更多隐式行，最终列数未必如预想。要做固定两行的横向卡片带，先锁定行模板，再用 grid-auto-columns 控制新列宽度。
容易答错的地方
- 认为隐式列会复制最后一条显式列的宽度
- 隐式列使用
grid-auto-columns，没有设置时取其初始值；不会自动照抄模板末列。 - 把容器缩小等同于自动换行
- 列流向仍沿列推进。响应式换行需要重新设计轨道与放置规则，或允许横向滚动。
面试官还会怎么问？
怎样让隐式列等宽？
给容器设置 grid-auto-columns，例如 180px，新增列就按这条规则定尺寸。
项目指定超出显式列线会怎样？
Grid 会扩展隐式网格容纳它，而不是简单忽略定位。
grid-auto-flow: column 能替代媒体查询吗？
不能。它只定义自动放置方向，不能表达“窄屏改成一列”的产品要求。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。