grid-template-columns: repeat(5, 1fr) 可使5列严格等宽并填满容器，因fr按剩余空间均分且天然忽略子项min-width: auto干扰；gap替代margin避免合并问题，子项无需额外样式，响应式只需调整repeat参数。
用 grid-template-columns: repeat(5, 1fr) 最省事
想让 5 个按钮或卡片严格等宽、填满容器，直接写：.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }。1fr 表示每列均分剩余空间，不依赖内容长度，也不受 button 默认 min-width: min-content 干扰。
常见错误是套了个 div 包裹再 flex，结果按钮被撑开——grid 天然无视替换元素限制，不用管 min-width、box-sizing 那些弯弯绕。
-
gap替代margin，避免父子 margin 合并导致间距错乱 - 所有子项（如
button或div）无需额外样式，min-width: 0可加可不加，仅防极端 case - 响应式只需改
repeat()参数，例如@media (max-width: 768px) { grid-template-columns: repeat(3, 1fr); }
为什么不用 flex: 1 给按钮直接均分
直接给 button 设 flex: 1 很大概率失效：浏览器对 button 默认设了 min-width: min-content，文字一长它就拒绝压缩，哪怕父容器是 display: flex。
验证方式：DevTools → 选中按钮 → 看 Computed 的 min-width 和 flex-basis，常看到 min-width: auto 或 min-content，而 flex-basis: 0% 没起作用。
- 必须显式写
min-width: 0（iOS Safari 可降级为1px） -
flex: 1实际是flex: 1 1 0%，但旧引擎可能解析为0，建议写全flex: 1 1 0 -
box-sizing: border-box要全局生效，否则padding/border会额外加宽
三行五列布局别只靠一层 flex
要排成 3 行 × 5 列（共 15 个按钮），不能只在外层设 display: flex —— 这样要么全挤一行，要么换行后列宽不一致。
正确做法是分层：外层用 display: flex; flex-direction: column 控制行数，每行自身是 display: flex 容器，按钮在每行内用 flex: 1 1 0 均分。
- 每行容器不要用
justify-content: space-between，会导致首尾留空、中间按钮变宽 - 按钮内文字加
white-space: nowrap防换行撑高；需省略时配text-overflow: ellipsis+overflow: hidden - 外层设
height: 100%时，确保html和body有明确高度，否则百分比无效
什么时候该切回 column-count
column-count 不是栅格工具，它是为**长文本自动断行分栏**设计的，比如新闻正文、博客文章。它不改变 DOM 顺序，IE10+ 全支持，且语义干净。
但一旦你给父容器加了 display: flex 或 display: grid，column-count 就完全失效——它只对 block 或 inline-block 元素生效。
- 优先用
column-width: 200px替代column-count: 3，让浏览器按宽度自动算栏数，更适应响应式 - 段落加
break-inside: avoid防跨栏断裂，但对img和iframe无效 - 跨栏标题用
column-span: all，但必须显式设display: block，且不能有float或position: absolute
column-count；flex 适合一维主次结构（如侧边栏+主内容），强行用它搞多栏容易踩 min-width 和嵌套层级的坑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
