如何为纯 CSS Grid 的奇数列添加背景色-html教程-PHP中文网

如何为纯 CSS Grid 的奇数列添加背景色

当网格容器内无子元素时，可通过线性渐变背景配合精确尺寸计算，为 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 列为例，完整实现如下：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.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 默认生效），无缝覆盖所有奇数列位置。

⚠️ 注意事项：