最稳的等宽多栏方案是grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)))，配合gap使用；避免用flex或column-count排卡片，需结合媒体查询实现移动端单列。
用 grid-template-columns: repeat(auto-fill, minmax()) 实现自适应等宽栏
这是现代项目里最稳的等宽多栏方案，不用算断点、不依赖媒体查询。核心是让浏览器自己决定列数：最小列宽设为 280px，容器够宽就多加一列，窄了就自动减少。
常见错误是写成 repeat(3, 1fr)——这强制三列，小屏下卡片被压扁；或者漏掉 gap，改用 margin 控制间距，结果父子 margin 合并导致第一行/最后一行间距异常。
-
minmax(280px, 1fr)中的280px是底线，不能低于这个值，否则会塌缩 - 必须配合
gap（不是margin），否则响应式换行时错位风险高 - 如果某栏需固定宽度（如带图标的侧边功能栏），直接写成
240px 1fr 1fr，别混用width和flex
为什么 flex 做等宽多栏容易翻车
Flex 本质是一维布局，强行用来做“多行等宽栅格”，得靠外层 flex-direction: column + 每行一个 display: flex 容器，嵌套深、调试绕。更麻烦的是按钮、图片这类替换元素默认有 min-width: min-content，flex: 1 经常不生效。
典型现象：15 个按钮排 3×5 网格，中间几列明显变宽，首尾列却窄——其实是 justify-content: space-between 在捣鬼，它会让首尾留空，中间项被迫拉伸。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须给每个子项显式写
flex: 1 1 0，不能只写flex: 1 - 替换元素（
button、img）要加min-width: 0才能真正压缩 - 文字内容需防撑高：
white-space: nowrap或word-break: break-word
column-count 只适合长文本分栏，别拿来排卡片
看到“多栏”就下意识用 column-count: 3？小心语义错配。column-count 是为段落文本设计的，它把一段内容切成多栏流动显示，DOM 结构不变，但无法控制单个“栏”里放什么。
如果你把商品卡片、功能按钮这些块级元素塞进 column-count 容器，它们会被切开、跨栏、错位——因为浏览器按文本流逻辑分栏，不是按元素边界。
-
column-count只对display: block或inline-block容器有效，父元素若设了display: flex或grid，该属性直接失效 - 想响应式？优先用
column-width: 200px，让浏览器按宽度自动算栏数，比死守column-count更靠谱 - 跨栏标题用
column-span: all，但它不能有float或position: absolute
移动端断点不是可选项，是必填项
Grid/Flex 再自适应，也救不了没加断点的三栏布局。768px 以下还保持三列，用户得左右拖拽才能看全内容，体验直接归零。
很多人以为“auto-fit 就够了”，其实它只管列数，不管堆叠方向。小屏下必须用媒体查询强制单列，且要确保 DOM 顺序合理（比如主内容在 HTML 里靠前，方便 SEO 和屏幕阅读器）。
- 移动端写
@media (max-width: 768px) { grid-template-columns: 1fr; }，别用display: block覆盖，会破坏 Grid 上下文 - 如果左栏是导航、右栏是工具，小屏可只隐藏一侧：
.sidebar-right { display: none; } - 平板（768px–1024px）可折中：保留主栏+一栏，用
order调整视觉顺序，不影响源码顺序
