最稳方案是直接用媒体查询修改grid-template-columns：手机单列（1fr）、平板两列（repeat(2,1fr)）、桌面三列（repeat(3,1fr)），统一设gap和box-sizing:border-box防撑破。
用 grid-template-columns + 媒体查询切列数最稳
直接改容器的 grid-template-columns，而不是隐藏/显示子项或调 flex-basis。手机默认单列，平板起两列，桌面三列——关键不是“列数多少”，而是列宽是否能随屏幕自然伸缩。
必须用 1fr，别写 33.33% 或 300px，否则小屏下会溢出或留白。
所有断点统一加 gap: 1rem，比用 margin 更可靠，不会因最后一行错位。
- 手机（默认）：
grid-template-columns: 1fr - 平板（≥768px）：
@media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); } - 桌面（≥1024px）：
@media (min-width: 1024px) { grid-template-columns: repeat(3, 1fr); }
漏掉 box-sizing: border-box 是常见翻车点：父容器有 padding 但没设这个，1fr 就会撑破容器边界。
column-count 没反应？先看这四个硬条件
column-count 不是“设了就生效”，它只在满足四条前提时才真正工作：
容器必须是块级（display: block 或 inline-block），不能是 flex、grid 或 table；
内容高度得够——两行文字基本不触发分栏；
不能设 overflow: hidden，否则第二列直接被裁掉；
父级不能是 display: flex 或 display: grid，否则子元素脱离流式上下文。
- 移动端列数突变时，优先用
column-width: 16rem替代column-count，让浏览器自动算列数 -
column-gap: 1.5rem和column-rule: 1px solid #eee必须同步设，小屏下间隙太小会导致文字糊成一团 -
break-inside: avoid在p上无效？先确认它是不是块级，再检查父级有没有column-span: all—— 有就失效
Flexbox 两列变单列，flex-direction 不是唯一开关
只写 flex-direction: column 往往不够，子项仍按原 flex-basis 占位，可能横向溢出。
真正起效的是控制子项“最小占位宽度”：flex: 0 0 100% 强制单列，flex: 0 0 50% 才是两列基础。
- 主容器设
display: flex，子项别写width: 50%—— 它不响应内边距和边框挤压 - 移动端切单列时，除了
flex-direction: column，还要补一句align-items: stretch防止子项收缩变形 - IE11 不支持
gap，用margin替代时，记得给最后一项margin-right: 0，否则多出一格空隙
auto-fit 多列网格真香，但 IE11 用户得降级
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) 是现代方案里最省心的，一行代码搞定从 1 列到 4 列自适应，不用写一堆媒体查询。
但 IE11 完全不认 auto-fit 和 minmax()，必须用 @supports 包一层，降级为 flex 或单列流式布局。
- 别把
auto-fill当auto-fit用——auto-fill会保留空列，常导致右侧大片空白 -
minmax(280px, 1fr)中的280px是底线，低于这个值就退化为单列，别设成120px，小屏阅读体验崩坏 - 如果内容少于 300 字，或含按钮/表单控件，别硬上多列——
column-count会让交互区域割裂，用户点不到
真正难的不是选哪个属性，而是判断“该不该用多列”：内容密度低、交互频繁、语义需连续时，老老实实单列更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
