如何用CSS Grid实现一行放不下就自动换行？

grid-auto-flow: row wrap 是启用 Grid 自动换行的必要开关，必须配合 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))) 才能响应宽度变化并正确换行；minmax() 提供弹性，gap 和 justify-items 配合解决对齐与间距问题。

用 grid-auto-flow: dense 不行，得用 grid-auto-flow: row wrap

很多人试过 grid-auto-flow: dense，发现它只影响“空缺填充”，完全不控制换行。真正让 Grid 容器支持自动换行的，是 grid-auto-flow 的 row wrap（或 column wrap）值——但必须配合明确的列轨道定义，否则无效。

常见错误现象：grid-template-columns: repeat(auto-fill, 200px) 写了，但子项还是挤在一行、溢出容器。原因往往是漏了 grid-auto-flow: row wrap，或者用了 repeat(auto-fit, ...) 却没设 minmax()。

1. grid-auto-flow: row wrap 是启用换行的开关，不能省略
2. grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))) 才能响应容器宽度变化并换行；auto-fill 比 auto-fit 更稳妥，避免空列塌缩
3. 如果子项设置了 grid-column 或 grid-row，会干扰自动布局，换行可能失效

为什么 minmax(200px, 1fr) 比固定宽度更可靠

直接写 repeat(auto-fill, 200px) 看似简单，但 Grid 会严格按 200px 切分列轨道，哪怕容器只剩 190px 宽，也会强行撑出一列导致水平滚动。而 minmax(200px, 1fr) 表示“每列至少 200px，最多均分剩余空间”，Grid 才会主动丢弃放不下的列、触发换行。

性能影响小，但兼容性要注意：minmax() 在 IE 中完全不支持，Edge 16+、Chrome 57+、Firefox 52+ 均可用。

1. 不要用 minmax(200px, 200px) —— 这等于固定宽度，失去弹性
2. 1fr 在 minmax() 中是合法且推荐的，不是“单位错误”
3. 若需最小宽度为内容自适应（如按钮），可用 minmax(min-content, 1fr)，但注意 min-content 可能导致过窄列

换行后对齐和间距的坑：别只靠 justify-content

justify-content: space-between 在单行时正常，一旦换行，末行子项可能左对齐、显得稀疏。这是因为 Grid 的 justify-content 作用于整行轨道，不是每行独立对齐。

正确做法是用 justify-items 控制子项在单元格内的对齐，再配合 gap 统一间距。若要末行也铺满，得放弃 auto-fill 改用 JavaScript 计算列数，或接受视觉上的不完美。

1. gap: 12px 比 margin 更干净，不会影响 Grid 轨道计算
2. justify-items: stretch（默认）能让子项填满单元格；设为 start 则左对齐，但末行依然可能不均布
3. 没有纯 CSS 的“末行 justify-content”等效方案，这是 Grid 的固有限制

当子项高度不一致时，align-content 才起作用

很多人以为 align-content 控制子项垂直对齐，其实它只在多行（或多列）时生效，用于对齐“行轨道块”本身。如果只有一行，align-content 完全无效；此时要用 align-items 控制单个子项在行内的对齐方式。

典型场景：卡片列表中图片高度不同，想让标题底部对齐。这时该用 align-items: end（对齐到行底边），而不是调 align-content。

1. align-content: flex-start 把所有行轨道挤到顶部，留白在下方
2. align-content: center 居中整个行块，适合容器有固定高度且需视觉居中
3. 子项内部文字垂直居中，仍需在其自身上设置 display: flex; align-items: center

实际换行逻辑比表面看到的更依赖轨道定义和自动流方向，wrap 不是“开个开关就完事”，而是和 minmax()、auto-fill、gap 共同构成一套约束系统。少一个环节，就可能卡在“看起来该换却没换”的状态里。