当网格容器内无子元素时，可通过线性渐变背景配合精确尺寸计算，为 27 列 css grid 的第 1、3、5… 等奇数列统一填充灰色，无需 javascript 或伪元素。
当网格容器内无子元素时，可通过线性渐变背景配合精确尺寸计算，为 27 列 css grid 的第 1、3、5… 等奇数列统一填充灰色，无需 javascript 或伪元素。
在纯 CSS Grid 布局中，若容器为空（即无任何 grid item），常规选择器（如 :nth-child(odd)）完全失效——因为这些伪类依赖实际存在的子元素。此时，最简洁、高效且语义清晰的解决方案是利用背景渐变（background: linear-gradient）模拟列底色。
核心思路是：将一个水平方向的重复渐变图案平铺，使其每一“周期”恰好覆盖两列宽度，其中前 50% 为灰色（对应奇数列），后 50% 为透明（或默认色，对应偶数列），再通过 background-size 精确控制单个周期占总宽的比例。
以 27 列为例，完整实现如下：
.grid {
display: grid;
grid-template-columns: repeat(27, minmax(0, 1fr));
grid-template-rows: repeat(6, minmax(0, 1fr));
height: 50rem;
width: 50rem;
/* 关键：每2列为1个渐变周期，奇数列显灰，偶数列透明 */
background: linear-gradient(90deg, #ccc 50%, transparent 0) 0 / calc(200% / 27);
}✅ 代码解析：
立即学习“前端免费学习笔记（深入）”；
- linear-gradient(90deg, #ccc 50%, transparent 0)：创建从左到右的水平渐变，前半段（50%）为 #ccc（浅灰），后半段立即切换为 transparent（注意 transparent 0 写法可避免颜色过渡，实现硬边分界）；
- 0 / calc(200% / 27)：background-position 设为 0（左对齐），background-size 设为 calc(200% / 27) —— 因为一个完整周期（1灰+1透明）需横跨 2 列，故总周期宽度为 200%，除以总列数 27，即每个周期宽度 = 200% ÷ 27 ≈ 7.407%，确保 27 个周期精准填满整个容器宽度；
- 渐变自动重复（background-repeat: repeat 默认生效），无缝覆盖所有奇数列位置。
⚠️ 注意事项：
- 若需修改列数（如改为 15 列），仅需同步更新 repeat(15, ...) 和 calc(200% / 15)；
- transparent 可替换为任意背景色（如 #fff），以适配深色/浅色主题；
- 此方法不干扰后续插入的 grid items —— 子元素仍正常渲染在渐变背景之上，层级关系天然合理；
- 不兼容旧版 IE，但现代浏览器（Chrome/Firefox/Safari/Edge ≥ 16）均完美支持。
该方案轻量、声明式、零 JS、高可维护，是空网格列着色问题的推荐实践。
