在网页开发中，用CSS Grid来构造类似表格的布局已经成为主流做法。相较于早期的table元素，Grid布局把结构层和表现层彻底分离，让我们可以仅通过样式规则就画出整齐的行列矩阵。其中grid-template-rows负责规定网格容器里每一行的尺寸，而grid-gap（包含row-gap与column-gap）则专门处理单元格之间的空白距离。把这两者结合，就能在不写任何table标签的情况下，复刻出表格的视觉秩序，并且轻松适配各种屏幕宽度。
grid-template-rows的基础语法与行高设定
grid-template-rows是应用在网格容器上的一个属性，它接收一系列长度值、比例值或关键字，按顺序定义每一行的轨道大小。例如写grid-template-rows: 50px 100px auto;就表示第一行固定五十像素，第二行一百像素，第三行根据内容自适应。在模拟表格时，我们常常希望表头行略高、数据行统一，这时可以直接罗列数值，也可以使用repeat()函数批量生成，比如repeat(5, 40px)代表连续五条四十像素高的行。
除了固定像素，minmax()函数在行高控制上非常实用。假设表格数据可能很短也可能很长，用grid-template-rows: 60px repeat(4, minmax(40px, auto));就能让首行表头恒为六十像素，其余行最少四十像素、内容多时自动撑开。这种写法比单纯auto更可控，不会出现某行被压缩得无法阅读的情况。注意，当行数不固定而是由后端循环输出时，可以配合grid-auto-rows定义隐式行高，效果与显式定义类似。
下面是一段最基础的容器样式示例，展示了如何给一个div容器设定三行轨道：
.table-grid {
display: grid;
grid-template-columns: 120px 1fr 80px;
grid-template-rows: 50px 60px 60px;
grid-gap: 8px;
}
上述代码先通过grid-template-columns画出三列，再用grid-template-rows明确三行高度，最后用grid-gap: 8px在行列间留出八像素缝隙。浏览器会严格按照这些轨道把子元素依次排入网格，看上去就是一张规整的表格。
grid-gap在表格样式中的间距控制机制
grid-gap其实是row-gap和column-gap的简写属性。过去表格用border-collapse和单元格边距来调整间隔，但那种方式很难做到行列间隙完全独立。Grid布局下，grid-gap: 10px 15px;表示行间距十像素、列间距十五像素；如果只写一个值如grid-gap: 12px;，则行列间隙同为十二像素。这种集中声明让表格整体留白变得极其简单，也方便后期统一改版。
在视觉上，gap所形成的空白区域不会着色，也不会被任何网格项覆盖，因此很适合用来模拟Excel那种灰底间隔效果。若想要斑马纹，可以在网格项上用nth-child选行加背景，而gap保持透明，这样行列边界自然分明。值得一提的是，旧版浏览器曾用grid-gap的前缀写法，但现在主流环境均已支持无前缀属性，且gap也已泛化到flex布局，但本文表格场景仍以grid容器内的grid-gap为准。
我们看一个结合行列间隙与自适行高的完整例子：
.data-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 44px repeat(3, minmax(36px, auto));
grid-gap: 6px 10px;
background: #f0f0f0;
padding: 6px;
}
.data-grid > div {
background: #ffffff;
padding: 4px 8px;
}
这里容器本身设了浅灰底，每个网格项白底，配合六与十像素的间隙，立刻呈现出现代数据表格的卡片化分隔感，却没有任何table语义负担。
结合两者实现响应式表格的常见方案与误区
把grid-template-rows与grid-gap组合使用时，最常见的正确方案是：用grid-template-columns做横向响应，用grid-template-rows中的auto或minmax容纳纵向内容，gap统一留白。例如在窄屏下把列改为单列堆叠，行高全部auto，gap不变，用户依旧能清晰分辨每条记录边界。这种结构在移动端后台列表里非常管用。
一个典型误区是认为gap会随行高变大而自动等比放大，其实gap是固定值，不会因minmax撑开而行距失真，这本是优点，但有人误以为用了gap就可以不写单元格内边距，结果文字贴边很难看。正确做法是gap负责单元格外部呼吸感，padding负责内部留白，两者互补。另一个误区是在动态数据下写死grid-template-rows的具体行数，导致多出数据被挤进隐式行且高度突变；此时应改用grid-auto-rows承接。
以下示例演示了如何用媒体查询切换列数，同时保持行规则与gap：
.resp-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 48px repeat(2, minmax(40px, auto));
grid-gap: 8px;
}
@media (max-width: 600px) {
.resp-grid {
grid-template-columns: 1fr;
grid-template-rows: 48px repeat(7, minmax(40px, auto));
}
}
在宽屏时四列两行数据区，到了手机上变单列八行（表头加七条），行高与间隙规则沿用，表格语义虽无table标签却一目了然。掌握这种组合，就能用纯CSS写出易维护、可响应的网格表格。
CSS_Gridgrid-template-rowsgrid-gap修改时间：2026-08-18 04:32:30