答案：在CSS Grid布局中，通过为grid item设置background或background-color属性可实现背景着色。1. 可直接为.item1、.item2等具体项目定义颜色；2. 利用:nth-child(3n+1)等伪类批量设置特定位置背景；3. 跨列项如.header使用grid-column并设background可覆盖多格；4. 需确保父容器为display: grid，背景应用于item本身而非容器槽位，注意box-sizing影响。方法灵活且与普通元素类似，关键在准确选择目标项。
在CSS Grid布局中，为网格单元格（grid item）设置背景颜色是一个常见的样式需求。实现方式直接且灵活，只需针对具体的 grid item 元素应用 background 或 background-color 属性即可。
1. 基础用法：直接设置 grid item 背景颜色
每个 grid item 是容器中直接子元素，你可以通过选择器为其单独设置背景色。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.item1 {
background-color: #ffcccc;
}
.item2 {
background: #ccffcc;
}
上面代码中，.item1 和 .item2 分别拥有不同的背景颜色。使用 background 简写属性也可以设置渐变或图片背景。
2. 使用 nth-child 定位特定位置的单元格
如果想为某一行、某一列或按规律分布的单元格统一设色，可以结合 :nth-child() 伪类选择器。
立即学习“前端免费学习笔记（深入）”；
/* 为每行的第一个单元格设置浅蓝背景 */
.grid-item:nth-child(3n + 1) {
background-color: #cce5ff;
}
/ 为第三个单元格设置黄色 /
.grid-item:nth-child(3) {
background-color: #fff3cd;
}
这种方式适合不需要额外类名的批量样式控制，尤其适用于动态生成的内容。
3. 通过 grid-area 控制跨行列区域的背景
当某个 item 使用 grid-column 或 grid-row 跨越多个单元格时，其背景会自动填充所占区域。
.header {
grid-column: 1 / -1;
background: #f0f0f0;
padding: 20px;
text-align: center;
}
这个例子中，.header 横跨所有列，背景颜色也会覆盖整个横条区域，常用于页头或标题栏设计。
4. 避免常见问题
- 确保父容器设置了 display: grid，否则子元素不会成为 grid item。
- 背景颜色应设置在 item 本身，而不是 grid container 的单元格“槽位”上（CSS 不支持直接给 grid track 设背景）。
- 若使用了 padding 或 border，注意 box-sizing 是否影响布局表现。
基本上就这些。只要选对元素，设置 grid item 背景颜色和普通块元素没太大区别，关键在于精准选择目标项并合理利用布局结构。不复杂但容易忽略细节。
