grid-template-columns: repeat(5, 1fr) 可实现五栏严格等宽，不受按钮默认 min-width: min-content 影响，但需配合 min-width: 0 防内嵌内容撑破列宽，并用 gap 替代 margin 控制间距；若需自适应列数，则改用 repeat(auto-fit, minmax(200px, 1fr))。
用 grid-template-columns: repeat(5, 1fr) 实现严格等宽五栏
要让 5 个按钮或卡片严格等宽并填满容器，grid 是最直接的解法。关键不是“怎么排”，而是避免被默认行为干扰：
-
grid-template-columns: repeat(5, 1fr)表示把可用空间均分成 5 份，每栏占 1 份——它不依赖内容宽度，也不受<button></button>的min-width: min-content影响 - 仍建议给子项加
min-width: 0，防极端情况（比如内嵌 SVG 或长单词）撑破列宽 - 用
gap控制间距，别用margin：后者在父子间易折叠，gap是网格原生隔离机制 - 如果容器宽度不足以容纳 5 列，会溢出而非自动换行；需要自适应列数时，改用
repeat(auto-fit, minmax(200px, 1fr))
为什么 flex: 1 在按钮上常失效
直接给 <button></button> 设 flex: 1 很可能没反应，因为浏览器对替换元素有隐式限制：
-
<button></button>默认带min-width: min-content，哪怕父容器是display: flex，它也拒绝压缩 - 必须显式覆盖：
min-width: 0（iOS Safari 可降级为1px），同时确保box-sizing: border-box已生效 -
flex: 1实际是flex: 1 1 0%，但旧引擎可能解析不准，写全更稳妥 - 若按钮嵌套在
<div> 里，需确认该 <code><div> 是 flex 容器且未设 <code>flex-wrap: wrap干扰主轴分配三行五列栅格用 flex 要分层控制
纯 flex 实现 3×5 按钮网格，不能只靠一层 flex 容器——必须结构化分层：
- 外层设
display: flex; flex-direction: column，控制“行堆叠” - 每行自身是
display: flex容器，按钮在其内部用flex: 1 1 0%+min-width: 0+box-sizing: border-box - 禁止用
justify-content: space-between：它会让首尾按钮间距变大，中间按钮被迫拉宽 - 按钮内文字加
white-space: nowrap防换行撑高；如需截断，配overflow: hidden+text-overflow: ellipsis
响应式列数切换别硬写媒体查询
列数随视口变化时，手动写一堆
@media容易漏断点、难维护：- 用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，浏览器自动计算能放几列，最小列宽 280px，超出就新增 - Flex 场景下可配合
flex-wrap: wrap+flex-basis: 280px，但需注意flex-basis是初始主轴尺寸，不是最小宽度 - Grid 的
auto-fit和auto-fill行为不同：auto-fit会收缩空轨道，auto-fill保留空位，优先选auto-fit - IE11 不支持
gap和1fr，真要兼容，得回退用grid-column-gap+flex混合方案
min-width: min-content这类隐式规则，不打开 DevTools 看 Computed 值，很容易卡半天。 - 外层设
