等宽多栏栅格布局无唯一解，需依内容类型、兼容性及旧浏览器支持需求选择：grid适合商品/按钮等独立区块二维排列，flex强行二维易破功，column-count专用于纯文本自动分栏。
等宽多栏栅格布局没有“唯一正确解”，选哪种取决于你排的是什么内容、要兼容到哪一年、以及是否愿意为旧浏览器写补丁。
用 display: grid 实现商品/按钮类等宽栅格最省心
Grid 天然适合「独立区块」的二维排列，比如商品卡片、功能按钮、导航项。它不关心内容长短，也不受 min-width: min-content 干扰。
-
grid-template-columns: repeat(5, 1fr)→ 严格 5 列等宽，填满容器 -
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)))→ 最小列宽 280px，自动增减列数 -
gap: 12px替代margin，避免父子 margin 合并问题 - 按钮或卡片内文字换行需手动加
white-space: nowrap或text-overflow: ellipsis
注意：min-width: 0 仍建议加在子项上（如 .btn-grid > button { min-width: 0; }），防极端情况下的宽度撑开。
用 display: flex 排三行五列按钮容易破功
Flex 是一维布局，强行做二维网格必须分层：外层 flex-direction: column 控制行数，每行再套一层 display: flex 均分按钮。但按钮本身是替换元素，有默认限制。
- 每个按钮必须显式设
min-width: 0（iOS Safari 可降级为1px） - 必须写全
flex: 1 1 0%，不能只写flex: 1，否则旧引擎可能解析为flex-basis: auto -
box-sizing: border-box要全局生效，否则 padding/border 会额外加宽 - 别用
justify-content: space-between，会导致首尾留空、中间按钮变宽
如果某行按钮数量不足 5 个，flex: 1 会让它们拉伸占满整行——这不是 bug，是预期行为，得靠 JS 补空节点或改用 Grid。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
用 column-count 排纯文本就别碰其他布局
column-count: 3 是唯一原生支持「同一段文字自动断栏」的方案，但它和 Flex/Grid 互斥：父容器若设了 display: flex 或 display: grid，column-count 直接失效。
- 只适用于
<p></p>、<div> 这类包裹连续文本的容器 <li> <code>column-width: 200px比column-count更可靠，实际栏数由宽度动态决定 - 跨栏标题用
column-span: all，但该元素不能有float或position: absolute - 父容器必须是
display: block（默认值即可），不能是 Flex/Grid 容器
拿它去排卡片或按钮，DOM 结构不会变，但视觉会错乱，调试时找不到原因——因为根本不是设计给这个用的。
真正容易被忽略的是：栅格的“等宽”需求背后，往往藏着语义差异。商品卡片之间是并列关系，用 Grid；一段说明文字要分栏阅读，用 column-count；而按钮组如果需要 hover 动画或状态联动，Grid 的选择器更干净，Flex 的嵌套层级更容易失控。
