gap在css grid中生效，但仅作用于直接子元素间的网格线空白，不等同border-spacing；后者仅用于table且撑开整体尺寸，而gap不参与盒模型计算。

gap属性在CSS Grid模拟表格时是否生效

生效，但只对Grid容器内直接子元素（即行/单元格）起作用，不能替代原生

的border-spacing行为。关键在于：你必须用display: grid替代table布局，且gap设置的是网格线之间的空白，不是边框间隙。

如何用grid-gap正确模拟带间距的表格结构

常见错误是把tr和td直接套用grid——这不行，因为tr不是display: grid的合法子项容器。正确做法是扁平化结构：用div模拟行与单元格，并显式定义列数。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 用display: grid设在包裹整个表格的容器上，而非tr
• 通过grid-template-columns: repeat(3, 1fr)定义列数（数值需匹配实际列数）
• gap: 8px同时控制行间距和列间距（等效于row-gap和column-gap）
• 避免给子元素设margin，否则会和gap叠加导致间距失控

```html
<div class="grid-table" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;">
<div>姓名</div>
<div>年龄</div>
<div>城市</div>
<div>张三</div>
<div>28</div>
<div>北京</div>
<div>李四</div>
<div>32</div>
<div>上海</div>
</div>
```

gap和border-spacing的行为差异在哪

这是最容易混淆的点：border-spacing仅作用于<table>，且会撑开表格整体尺寸（含边框），而<code>gap不增加容器尺寸，只是“留白”，且不参与盒模型计算。当需要兼容IE或保留语义化table标签时，gap完全无效。

• border-spacing只在border-collapse: separate下生效，且无法单独控制行列间距（需写成border-spacing: 4px 8px）
• gap可分别用row-gap和column-gap控制，更灵活
• 若表格有合并单元格（colspan/rowspan），Grid方案需手动计算grid-column/grid-row，无法自动识别

移动端适配时gap值该用px还是rem

用rem更稳妥。因为gap是布局间距，不是字体相关度量，但用rem能随根字号缩放，适配不同DPR屏幕；而固定px在高DPR设备上可能显得过窄。

• 推荐写法：gap: 0.5rem（对应8px @16px基准）
• 避免用%，gap不支持百分比单位
• 若需响应式断点调整，可用@media覆盖gap值，不要依赖JavaScript动态计算

真正麻烦的不是写gap，而是当表格需要排序、筛选或服务端渲染时，Grid结构会让DOM操作和CSS选择器变复杂——这时候老老实实用table加border-spacing反而更省事。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！