用 grid-template-columns 的 minmax() 配合 auto-fit 实现响应式列宽最可控，避免像素值硬编码；Flex 列宽需结合 flex-basis、flex-grow 与 min-width；Grid 与 Flex 混用时应明确层级职责，防止宽度冲突。
用 grid-template-columns 实现响应式列宽控制
直接靠 fr 单位或 minmax() 配合 auto-fit 是最可控的方式，比写一堆 max-width + flex-basis 更干净。
常见错误是写死像素值（比如 grid-template-columns: 200px 200px），导致小屏下溢出或留白过大。正确做法是让列“有弹性但有底线”：
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 每列至少 280px，多出来的空间均分，列数随容器自动增减 - 加
gap替代 margin，避免在 flex 中因外边距塌陷或换行错位带来的麻烦 - 注意 Safari 旧版本对
auto-fit支持不稳定，可降级为auto-fill（会生成空轨道，需配合visibility: hidden或display: none清理）
用 flex 做流式卡片布局时的列宽陷阱
Flex 本身不定义列数，所谓“列宽”其实是子项的 flex-basis + flex-grow 组合效果，容易误判。
典型问题：设了 flex: 1 后，小屏下单张卡片被压扁，文字换行异常；或者用了 flex: 0 1 300px，但没限制最小宽度，导致窄屏下卡片宽度跌破内容所需。
立即学习“前端免费学习笔记（深入）”；
- 优先用
flex: 0 1 min(300px, 100%)（CSS clamp 不支持时可用max-width+flex-basis双保险） - 必须配
flex-wrap: wrap，否则所有子项强行挤在一行，flex-basis失效 - 避免在 flex 容器上设
justify-content: space-between同时又希望列宽严格等分——它只分配剩余空间，不重算基础宽度
Grid 和 Flex 混用时的列宽冲突点
常见场景：外层用 Grid 控制整体区域划分（如 sidebar + main），内层用 Flex 排卡片。这时卡片的“列宽”受两层约束，容易打架。
比如 Grid 区域设了 grid-area: main 并给了 width: 70%，而内部 Flex 子项又设 flex-basis: 300px，结果在中屏下卡片实际宽度可能远小于 300px，因为父容器太窄。
- 优先把列宽逻辑收口到最内层容器（即卡片直系父元素），外层 Grid 只负责区域比例，不干预具体列数
- 用
min-width: 0修复 Flex 子项在 Grid 轨道中不收缩的问题（Grid 默认min-width: auto，会阻止 flex 子项压缩） - 调试时检查 computed styles 中
flex-basis是否被 Grid 的inline-size截断，而不是只看声明值
移动端列宽突然崩掉的几个隐蔽原因
不是媒体查询没写，而是某些 CSS 行为在视口变化时“悄悄改了列宽计算基准”。
-
font-size: clamp(1rem, 2.5vw, 1.5rem)会影响行高，进而影响卡片高度，触发 Flex 换行提前或延后，看起来像列宽突变 - 图片没设
max-width: 100%+height: auto，撑开卡片容器，间接拉宽整列 - 使用
scroll-snap-type的横向滚动容器里嵌套 Grid/Flex，某些安卓 WebView 会错误计算轨道尺寸，导致列数固定不变
列宽管理本质是“容器尺寸 → 子项分配规则 → 内容自适应能力”的链式反应，任一环松动都会表现成列宽失控。真正难的不是语法，而是判断哪一层该承担哪部分弹性责任。
