响应式多列变单列应优先用CSS Grid的repeat(auto-fit, minmax(280px, 1fr))实现自动适配，其次用Flex配合flex-wrap: wrap与媒体查询控制子项宽度，IE11等旧浏览器需降级为固定列数+媒体查询兜底。
手机上多列变单列：用 flex 的 flex-wrap 和断点控制
Flex 布局实现响应式多列，核心是让容器在小屏时自动换行堆叠。关键不是强行设列数，而是靠 flex-direction: column 或 flex-wrap: wrap 配合媒体查询切换行为。
常见错误是直接写 display: flex; flex-direction: row; 然后期待它“自己变堆叠”——它不会，必须显式干预。
- 给父容器设
display: flex和flex-wrap: wrap，子项设固定宽度（如flex: 0 0 calc(50% - 10px)表示两列） - 在手机断点（如
@media (max-width: 768px)）中把子项宽度设为100%，或改父容器为flex-direction: column - 避免用
flex: 1在小屏下撑满整行导致错位；优先用flex: 0 0 100%显式声明不伸缩
更简洁的方案：用 grid 的 minmax() + auto-fit
Grid 是目前最干净的多列响应式解法，无需媒体查询也能自动适配列数，前提是正确使用 grid-template-columns 函数。
典型错误是写死列数（如 grid-template-columns: repeat(3, 1fr)），这在手机上只会压缩内容、不换行。
立即学习“前端免费学习笔记（深入）”；
- 用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 浏览器会尽可能放宽度 ≥280px 的列，放不下就自动减少列数，最小到 1 列 -
auto-fit会合并空轨道，auto-fill则保留空格，多数场景选auto-fit - 配合
gap控制间距，比手动算 margin 更可靠；注意旧版 Safari 对minmax()支持需加-webkit-前缀
兼容性兜底：当必须支持 IE11 时怎么处理
IE11 完全不支持 grid 的 auto-fit 和大部分函数值，也不能用 flex-wrap 实现稳定堆叠（尤其子项高度不一致时易错行）。
这时别硬扛，降级为纯媒体查询 + 固定列数切换：
- 默认写三列布局（
display: flex或float），用@media (max-width: 480px)强制子项width: 100%; float: none; margin: 0 - 避免用
flex: 1或calc()宽度，IE11 对它们解析不稳定；统一用百分比或max-width - 如果用了
grid，需额外加@supports not (display: grid)规则覆盖旧浏览器样式
实际开发中容易被忽略的细节
多列堆叠看似简单，但真正在项目里出问题的，往往卡在这些地方：
- 父容器没设
width: 100%或含padding，导致子项计算宽度偏差，minmax()判定失败 - 子项内部有
white-space: nowrap或固定宽高的内容（如图片未设max-width: 100%），撑破列宽，破坏自动换列逻辑 - 用
flex时忘了设align-items: flex-start，子项高度不一导致底部参差，视觉上像“没堆叠好” - 测试只在 Chrome 模拟器看，但真机 Safari 对
gap和aspect-ratio支持滞后，得实测
