minmax(280px, 1fr) 是最稳起点，确保每列最小280px、最大均分剩余空间；避免用百分比（如minmax(30%, 1fr)）导致整条声明失效，移动端可调至250px或320px适配图片，务必配合box-sizing: border-box。
grid-template-columns: repeat(auto-fit, minmax()) 怎么设宽度才不崩
直接用 minmax(280px, 1fr) 是最稳的起点，它让每列最小 280px、最大均分剩余空间。关键不是“想要几列”，而是“内容能撑开多少”。auto-fit 会让空列自动收缩消失，auto-fill 则保留空位（适合卡片预留格，但容易在小屏留白）。
常见错误是写成 minmax(30%, 1fr) —— 百分比在 minmax() 里无效，浏览器会忽略整个值，退化为单列或错乱布局。
- 移动端优先：从
minmax(250px, 1fr)开始调，小屏下自然缩成 1 列 - 内容含图片/卡片：把最小值提到
320px，避免图片被压扁 - 容器有 padding：必须加
box-sizing: border-box，否则列宽计算会多出 padding 偏差
table-layout: fixed + width: 100% 为什么列宽百分比还是不生效
只写 width: 100% 没用，浏览器默认用 table-layout: auto，列宽由内容决定，20% 这类设置完全被无视。必须两者同时存在，且 table 元素自身要带这两个声明。
更隐蔽的问题是父容器没可计算宽度——比如外层 <div> 只写了 <code>padding: 20px 却没设 width 或 max-width，百分比就失去参照。
- 列宽控制唯一可靠方式是
<col width="25%">，位置必须紧接<table> 后、<code><thead> 前 <li><code><th width="25%"> 在 <code>fixed模式下常被忽略，别依赖它 - 长 URL 或无空格字符串会撑破列宽，得额外加
word-break: break-all或overflow-wrap: break-word - 用
column-width: 200px让浏览器自己算列数，比column-count: 3更适应不同屏幕 - 需要列间分隔线？加
column-rule: 1px solid #eee，比手动加边框干净 - 某段不想分栏？给它加
break-inside: avoid（注意 Safari 旧版本需-webkit-column-break-inside） - 想强制最小宽度不被压缩：去掉
flex: 1，改用flex: 0 0 300px（不伸缩、不收缩、固定 300px） - 要兼顾弹性与底线：用
flex: 1 1 300px+min-width: 300px，双重保险 - 最后一行错位？别用
margin控制间距，统一用gap: 1rem（Grid/Flexbox 都支持）
columns 属性适合什么场景？什么时候该换 Grid
columns 只适合纯文本流式分栏，比如新闻正文、博客段落。它把内容当“一整块文字”切开，不保持元素边界，<div>、<code><img> 都可能被硬生生劈成两半。
一旦你要控制每个卡片的完整显示、对齐、间距或跨行行为，columns 就失效了。比如三张卡片并排，其中一张高很多，columns 会让后面的内容全往下错位，而 Grid 能用 grid-auto-rows: minmax(min-content, max-content) 锁住每行高度。
Flexbox 做多列时，flex-basis 和 min-width 冲突怎么办
flex: 1 1 300px 中的 300px 是 flex-basis，它定义主轴上的初始大小；而 min-width: 200px 是独立约束。两者共存时，min-width 会覆盖 flex-basis 的下限 —— 也就是说，即使 flex-basis 设了 300px，只要容器窄到 200px，它也会被压到 200px。
这不是 bug，是 Flexbox 的正常行为。但容易误以为 “设了 300px 就不会更小”，结果小屏上列挤成一条缝。
真正难的不是写哪一行 CSS，而是判断内容是否「适合被切」：文本流用 columns，卡片块用 grid，简单等宽项用 flex。混用时，gap 和 box-sizing 是最容易被跳过的两个点。
