grid-template-columns: repeat() 是最直接的等宽布局写法，如 repeat(5, 1fr) 实现5列均分，repeat(auto-fill, minmax(280px, 1fr)) 支持响应式列数增减；搭配 gap 控制间距、min-width: 0 防按钮撑宽、align-items: stretch 统一卡片高度，并通过媒体查询调整列数而非 display: none。
grid-template-columns: repeat() 是最直接的写法
想让按钮、卡片或功能项等宽排列，别绕弯子写 Flex 嵌套或手动算百分比。grid-template-columns: repeat(5, 1fr) 一行就搞定 5 列等宽，repeat(3, 1fr) 就是三等分。它不依赖子元素内容长度，也不受 min-width: min-content 干扰——这点比 Flex 可靠得多。
常见错误是漏掉 repeat() 的括号，或者写成 grid-template-columns: 1fr 1fr 1fr 后发现列数固定死，无法响应式调整。用 repeat(auto-fill, minmax(280px, 1fr)) 才能自动增减列数，适合商品列表这类场景。
-
1fr不是 33.33%，而是“把当前行剩余空间均分成若干份”，和容器宽度强相关 - 列数超过容器能容纳时，
auto-fill会留空列，auto-fit会收缩已有列填满空间 - IE11 不支持
auto-fill和minmax()，真要兼容就得 fallback 到 Flex +flex-basis
gap 比 margin 更稳，别在子元素上加 margin
用 gap: 12px 控制栅格间距，它作用于网格线之间，不影响轨道计算。而给每个按钮或卡片加 margin-right 或 margin-bottom，容易触发 margin 折叠，尤其在嵌套容器里，还会让实际可用宽度变小，导致最后一列换行或溢出。
如果用了 Flex 实现多栏，gap 在 Safari 14.1 以下不支持，此时可退回到 margin，但必须配 :last-child 清除末尾多余边距；Grid 下则完全不用操心这个。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
gap在 Grid 和现代 Flex 中都可用，优先选它 - 不要同时用
gap和子元素margin，否则间距翻倍 - 图片卡片高度不一致？加
align-items: stretch让所有子项等高
按钮等宽失效？先查 min-width 和 box-sizing
Flex 下按钮不等宽，大概率是因为浏览器给 <button> 默认设了 min-width: min-content，文字长的按钮就撑得宽。DevTools 里看 Computed 面板，如果 min-width 是 auto 或 min-content，那就得显式重置。
Grid 虽然天然规避这个问题，但为防极端情况（比如按钮内嵌 SVG 或复杂布局），仍建议统一加 min-width: 0。再配上 box-sizing: border-box，确保 padding 和 border 不额外加宽。
- Flex 场景下，按钮必须写
flex: 1 1 0+min-width: 0+box-sizing: border-box - Grid 场景下，
min-width: 0是防御性写法，不是必须，但加上更稳妥 - iOS Safari 对
min-width: 0支持不稳定，可降级为min-width: 1px
响应式切换列数，别用 display: none
小屏下三栏变单栏，直接改 grid-template-columns 就行，比如 @media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }。别用 display: none 隐藏某几列，那会破坏 Grid 的结构语义，还可能影响可访问性和 SEO。
如果某列在小屏要完全移除（比如侧边栏），可以用 grid-column: 1 / -1 让主内容跨全列，而不是靠 visibility 或 display 控制显示隐藏。
- 列数变化时，
gap保持一致，视觉节奏才统一 - 避免在媒体查询里切 Flex +
flex-direction: column，除非你明确需要竖排滚动 - 平板断点（768px–1024px）可只隐藏一侧边栏，用
grid-column: auto重排而非删 DOM
float，或者用 flex-wrap: wrap 试图让三栏在窄屏折行却没设 flex-basis，结果发现根本不会折。这些细节一旦漏掉，调试时间远超重写成本。 
