使用 grid-template-rows 定义行高结构，结合 :nth-child(even) 和 :nth-child(odd) 为网格行设置交替背景色，通过 .row > div 选择器将样式应用到单元格，实现斑马条纹效果；利用 display: contents 使子元素直接受网格控制，同时保持按行染色逻辑，适用于现代浏览器中的数据表格布局。
在CSS Grid布局中实现表格交替行背景色，可以通过结合 grid-template-rows 与 :nth-child 伪类来完成。虽然Grid本身不自动提供“奇偶行”着色功能，但利用现代CSS选择器可以轻松实现视觉上的斑马条纹效果。
理解 grid-template-rows 的作用
grid-template-rows 用于定义网格容器中每一行的高度。它不会直接影响背景色，但它是构建结构的基础。例如：
.grid-container {
display: grid;
grid-template-rows: repeat(5, 50px); /* 创建5行，每行50px高 */
gap: 1px;
}
这样我们创建了一个有明确行高的网格结构，接下来就可以对具体行应用样式。
使用 :nth-child 实现交替背景色
真正实现“奇偶行不同背景”的关键是 :nth-child(even) 和 :nth-child(odd)。假设每个网格项是一个独立的单元格或整行元素：
立即学习“前端免费学习笔记（深入）”；
.grid-item:nth-child(even) {
background-color: #f0f0f0;
}
<p>.grid-item:nth-child(odd) {
background-color: #ffffff;
}</p>如果每一行由多个列组成（如表格行），你可以将每行包裹在一个 grid item 中，并对该 item 应用上述规则。
实际应用场景示例
假设我们要做一个4列、6行的数据表格，使用 Grid 布局模拟 table 效果：
.table {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(6, 50px);
gap: 0;
}
<p>.row {
display: contents; /<em> 让内部单元格直接参与网格布局 </em>/
}</p><p>.row > div {
border: 1px solid #ccc;
padding: 10px;
}</p><p>.row:nth-child(even) > div {
background-color: #f9f9f9;
}</p><p>.row:nth-child(odd) > div {
background-color: white;
}</p>HTML结构如下：
<div class="table"> <div class="row"><div>A1</div><div>B1</div><div>C1</div><div>D1</div></div> <div class="row"><div>A2</div><div>B2</div><div>C2</div><div>D2</div></div> <!-- 更多行 --> </div>
通过 display: contents，.row 容器不会打断网格布局，其子元素直接受 grid 控制，同时又能利用父级选择器实现按行染色。
注意事项与兼容性
确保交替行逻辑正确：
- 若使用 :nth-child，注意目标元素是否为同级兄弟节点
- 避免中间插入非数据行（如标题、分隔行）破坏奇偶计数，必要时使用 :nth-of-type
- 对于复杂表格，可考虑添加类名（如 .even / .odd）通过JS控制更稳定
- 现代浏览器均支持 :nth-child 和 Grid，IE 不支持需规避
基本上就这些。掌握 grid-template-rows 定义结构、配合 :nth-child 控制样式，就能灵活实现美观的交替背景网格表格。
