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()。
-
grid-auto-flow: row wrap是启用换行的开关，不能省略 -
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)))才能响应容器宽度变化并换行；auto-fill比auto-fit更稳妥，避免空列塌缩 - 如果子项设置了
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+ 均可用。
- 不要用
minmax(200px, 200px)—— 这等于固定宽度，失去弹性 -
1fr在minmax()中是合法且推荐的，不是“单位错误” - 若需最小宽度为内容自适应（如按钮），可用
minmax(min-content, 1fr)，但注意min-content可能导致过窄列
换行后对齐和间距的坑：别只靠 justify-content
justify-content: space-between 在单行时正常，一旦换行，末行子项可能左对齐、显得稀疏。这是因为 Grid 的 justify-content 作用于整行轨道，不是每行独立对齐。
正确做法是用 justify-items 控制子项在单元格内的对齐，再配合 gap 统一间距。若要末行也铺满，得放弃 auto-fill 改用 JavaScript 计算列数，或接受视觉上的不完美。
-
gap: 12px比margin更干净，不会影响 Grid 轨道计算 -
justify-items: stretch（默认）能让子项填满单元格；设为start则左对齐，但末行依然可能不均布 - 没有纯 CSS 的“末行 justify-content”等效方案，这是 Grid 的固有限制
当子项高度不一致时，align-content 才起作用
很多人以为 align-content 控制子项垂直对齐，其实它只在多行（或多列）时生效，用于对齐“行轨道块”本身。如果只有一行，align-content 完全无效；此时要用 align-items 控制单个子项在行内的对齐方式。
典型场景：卡片列表中图片高度不同，想让标题底部对齐。这时该用 align-items: end（对齐到行底边），而不是调 align-content。
-
align-content: flex-start把所有行轨道挤到顶部，留白在下方 -
align-content: center居中整个行块，适合容器有固定高度且需视觉居中 - 子项内部文字垂直居中，仍需在其自身上设置
display: flex; align-items: center
wrap 不是“开个开关就完事”，而是和 minmax()、auto-fill、gap 共同构成一套约束系统。少一个环节，就可能卡在“看起来该换却没换”的状态里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
