Grid 是响应式列布局的首选方案，用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 实现列数自适应，配合 gap 控制间距；Flex 适用于高度差异大、仅需换行的轻量场景，需设 flex-wrap: wrap 和 flex: 1 1 250px。
用 grid-template-columns 配合 minmax() 和 auto-fit 实现列宽自动伸缩
Grid 是目前最直接、可控性最强的方案。关键不是写死列数，而是让浏览器根据容器宽度和子项最小尺寸自动计算能放几列。
常见错误是写成 grid-template-columns: repeat(3, 1fr) —— 这会强制三列，完全不响应；或者用 repeat(auto-fill, 200px)，但没设最小约束，小屏下会溢出。
-
minmax(250px, 1fr)表示每列至少 250px，剩余空间均分（1fr） -
auto-fit会让空轨道被压缩消失，比auto-fill更适合内容不固定的情况 - 完整写法：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) - 配合
gap控制间距，避免用margin干扰 Grid 自动计算
Flex 布局中用 flex-wrap + flex-basis 模拟“弹性列”
Flex 本身不管理列数，但可以通过换行 + 单项基础宽度 + 自适应收缩来逼近效果。它更适合内容项高度差异大、或需要逐行对齐的场景。
典型陷阱是只设 flex: 1 却没限制最小宽度，导致小屏下单个卡片被压成一条细线；或者忘了加 flex-wrap: wrap，所有项强行挤在一行。
立即学习“前端免费学习笔记（深入）”；
- 必须设
display: flex和flex-wrap: wrap - 子项用
flex: 1 1 250px（即flex-grow: 1,flex-shrink: 1,flex-basis: 250px） - 为防极端窄屏下内容溢出，建议额外加
min-width: 0或overflow: hidden - 若需等高，得靠
align-items: stretch（默认），但文字多时可能需配合line-clamp截断
Grid 与 Flex 在响应式列布局中的关键差异
选哪个不取决于“哪个更新”，而看你要不要跨行对齐、是否需要显式定义二维结构。
- 要控制行高一致性、跨列合并、或明确指定某项占两列？必须用 Grid —— Flex 没有行概念
- 子项高度差异极大（比如图文混排），且只需“尽量多放、换行即可”？Flex 更轻量，兼容性也更好（IE11 支持 Flex，不支持 Grid）
- Grid 的
auto-fit在 Safari 旧版本（force-redraw 类触发重绘 - 两者都依赖父容器有明确宽度（不能是
width: auto且无约束的 inline 元素）
移动端真机调试时容易忽略的 CSS 陷阱
开发时在桌面 Chrome 拉缩窗口看着正常，一上手机就错位，往往不是逻辑问题，而是 viewport 或缩放干扰了计算。
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在且没被 JS 覆盖 - iOS Safari 对
minmax(min, max)中的max为1fr时，有时会误判为 0，可临时改用minmax(250px, 9999px)测试是否是此 bug - Android WebView（尤其旧版）对
gap支持不稳定，必要时用padding替代 - 别在子项上写死
width: 100%，它会和flex-basis或grid-column冲突，优先级混乱
repeat(3)，而不是强求 auto-fit。 
