fr适合内容不确定且需等比分配的场景，须配minmax()防过窄；auto适合固定内容，建议搭配max/min-content；px/rem仅用于像素级对齐；gap最接近border-spacing，但不作用于容器边界。
grid-template-rows/cols 里用 fr 还是 px 或 auto？
表格布局的核心诉求是“行列对齐、内容自适应、间距可控”，Grid 里最常踩的坑就是混用单位导致行列错位。比如用 fr 定义行高，但某单元格内容撑开后，其他行没同步等高；又或者用 px 写死列宽，结果文字换行或缩放时溢出。
-
fr适合内容长度不确定、需等比分配空间的场景（如三栏导航），但必须配合minmax()防止过窄：例如grid-template-columns: minmax(200px, 1fr) 2fr 1fr -
auto适合固定内容（图标、开关按钮），但单独用会失去控制——建议搭配max-content或min-content，比如grid-template-rows: auto min-content让标题行自适应，数据行按内容最小高度排布 - 绝对单位（
px、rem）只在真正需要像素级对齐时用，比如和 legacy 表格混排，否则响应式下容易断裂
gap 和 border-spacing 哪个更接近表格的“单元格间距”？
gap 是 Grid 原生的行列间距控制，行为上最接近表格的 border-spacing，但它不作用于边界——也就是说，Grid 容器外边没有“间隙”。而很多人误用 padding 模拟，结果导致整体尺寸计算变复杂。
- 直接设
gap: 8px即可实现行列间统一留白，无需给每个子项加margin - 如果要模拟带外边框的表格（即第一行上方、最后一行下方也有间距），得额外给容器加
padding，且注意这不属于“单元格间距”语义，只是视觉补偿 - 避免同时设
gap和子项margin：会导致双倍空白，调试时很难区分来源
如何让 grid 子项像 <td> 一样自动拉伸填满单元格？
<p>默认情况下，Grid 子项不会自动撑满所在轨道，尤其当内容短于轨道尺寸时，会左上对齐、留白。这不是 bug，而是 Grid 的默认对齐策略。</p>
<ul><li>用 <code>align-items: stretch（容器属性）让所有子项在行方向拉伸，等效于 <td> 的垂直铺满
<li>用 <code>justify-items: stretch 实现列方向拉伸（水平铺满）；若只想个别子项拉伸，改用 align-self 或 justify-self
width 或 height（尤其是固定值），会覆盖 stretch 行为，此时需显式写 width: 100% 或 height: 100%
word-break: break-word 或 overflow-wrap: break-word 更稳妥IE11 兼容时 grid-gap 失效怎么办？
IE11 支持部分 Grid 语法，但不支持 gap（包括 grid-gap），这是最常被忽略的兼容性断点。强行使用会导致整个布局坍缩或回退到单列流。
- 必须用
display: -ms-grid+-ms-grid-columns/-ms-grid-rows手动降级，且无法用gap，只能靠子项margin模拟间距（注意 IE 对margin的盒模型处理差异） - 现代项目建议用
@supports (display: grid)包裹 Grid 样式，把 IE11 逻辑单独写在外面，避免样式污染 - 工具链里别只信 Autoprefixer——它不补
gap，也不转译fr单位，得靠postcss-grid-kiss或手动 fallback
100% 或多写了 px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
