如何为纯 CSS 网格（无子元素）的奇数列添加背景色-html教程-PHP中文网

如何为纯 CSS 网格（无子元素）的奇数列添加背景色

本文介绍在不依赖网格子项的前提下，仅通过 background 渐变技巧为 css grid 的奇数列（第1、3、5…列）统一着色的方法，适用于空网格容器的视觉分区需求。

本文介绍在不依赖网格子项的前提下，仅通过 background 渐变技巧为 css grid 的奇数列（第1、3、5…列）统一着色的方法，适用于空网格容器的视觉分区需求。

要为一个完全为空的 CSS Grid 容器（即内部没有

等子元素）实现“奇数列背景为灰色”的效果，无法使用 :nth-child 或 grid-column 伪类——因为这些都依赖真实存在的网格项。此时，最简洁、高效且符合语义的方案是：利用线性渐变（linear-gradient）配合精确的背景尺寸与重复定位，模拟列级条纹效果。

核心原理如下：

水平渐变 linear-gradient(90deg, #ccc 50%, transparent 0) 创建一个宽度为 50% 的灰色色块 + 50% 透明区域，构成单个“灰-透”单元；
通过 background-size: calc(200% / 27) 将该单元缩放到 总宽度的 2/27（即覆盖 2 列的宽度），从而让每个“灰-透”单元恰好对应 1 列灰 + 1 列透明；
默认 background-repeat: repeat 自动水平铺满，最终实现第1、3、5…（所有奇数）列呈现灰色，偶数列保持透明（显示父背景或默认色）。

✅ 正确代码示例：

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;

  /* 关键：奇数列灰色条纹背景 */
  background: linear-gradient(90deg, #ccc 50%, transparent 0) 0 / calc(200% / 27);
}

⚠️ 注意事项：