css grid按需自动换行本质是grid-template-columns配合minmax()动态生成列轨道，需确保父容器有明确宽度、子项不撑满单元格、box-sizing正确，且minmax()参数合规（如minmax(120px, 1fr)）。
用 grid-template-columns 控制列数和宽度分配
Grid 的列不是靠写多个 <div> 堆出来的，而是由容器的 <code>grid-template-columns 决定“最多能摆几列、每列怎么分”。按需分布的关键是别写死列数，改用 repeat() + minmax() 或 auto-fit/auto-fill。
常见错误是直接写 grid-template-columns: 1fr 1fr 1fr —— 这强制三列，内容少时留白，内容多时溢出或换行（如果没设 grid-auto-flow: column）。
实操建议：
- 想让列数随容器宽度自动增减：用
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))) - 想保证至少一列不压缩过小：把
250px换成你业务能接受的最小列宽（比如卡片最小宽度） -
auto-fit会收缩空列，auto-fill会保留空列占位 —— 大多数场景选auto-fit - 别漏掉
gap，否则列紧贴在一起，视觉上不像“多列”
为什么 grid-auto-flow: column 很少需要
默认 grid-auto-flow: row 是按行填满再换行，符合阅读习惯；只有当你明确要“纵向优先铺满一列再下一列”（比如时间轴、瀑布流替代方案），才需要改。但这种布局在响应式中难控制，且语义混乱（DOM顺序和视觉顺序不一致）。
按需分布的多列，本质是“横向空间够就多放一列”，不是“强行竖着填”。所以绝大多数情况保持默认即可。
容易踩的坑：
- 加了
grid-auto-flow: column却没设grid-template-rows，导致行高失控、内容重叠 - 误以为它能解决“等高列”问题 —— 实际上 Grid 天然等高，跟这个属性无关
- 在媒体查询里反复切换
row/column，反而让可访问性变差（屏幕阅读器按 DOM 顺序读，视觉却是列优先）
内容项数量少于列数时怎么避免留白
当只有 2 个子元素，而 grid-template-columns 算出来能塞 4 列，空白列默认是“看不见但占位”的 —— 这不算错，但有时不符合设计预期。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
解决思路不是删列，而是让剩余列不占空间：
- 用
grid-auto-columns: 0配合auto-fit，可让空列坍缩（但兼容性注意：IE 不支持） - 更稳的做法是配合
:nth-child或 JS 动态加 class，对尾部空位设display: none（不推荐，破坏语义） - 真正干净的解法：接受留白，或换用
justify-content: start把所有列左对齐，右侧留白比中间散列更自然
注意：不要用 grid-column: span 2 去“合并”来凑满，那会破坏列的均等性和响应行为。
IE 兼容下怎么妥协
IE10/11 支持旧版 Grid 语法（-ms-grid），但不支持 auto-fit、minmax() 和 fr 单位。如果必须兼容，只能放弃“按需分布”，退化为固定列数 + 媒体查询切断点。
示例（仅 IE）：
.container {
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr;
}
.container > * {
-ms-grid-column: auto;
}
但要注意：
- IE 中
fr行为不稳定，建议用px或百分比 - 无法实现真正的流式列数变化，只能在几个断点间切换 1/2/3 列
- 现代项目若已放弃 IE，就别加这些前缀代码，徒增维护成本
按需分布的核心价值在于摆脱断点依赖，一旦退化到媒体查询，其实已经偏离了 Grid 的设计初衷 —— 这点容易被忽略，但很关键。
