如何让CSS Grid的网格线（grid-lines）延伸至网格范围之外？

我可以正常创建3×3网格：

[A][B][C]
[D][E][F]
[G][H][I]

添加gap属性后会拉开元素间距：

[A] [B] [C]

[D] [E] [F]

[G] [H] [I]

填充背景能模拟网格线效果：

.-----------.
|[A]|[B]|[C]|
|---+---+---|
|[D]|[E]|[F]|
|---+---+---|
|[G]|[H]|[I]|
`-----------`

但我想实现网格线对齐到网格的gap中，同时按设定长度延伸至网格之外的效果：

|   |   |   |
--+---+---+---+--
  |[A]|[B]|[C]|
--+---+---+---+--
  |[D]|[E]|[F]|
--+---+---+---+--
  |[G]|[H]|[I]|
--+---+---+---+--
  |   |   |   |

我之前用绝对定位的DIV结合网格自定义属性公式实现了该效果，但这种方法需要提前知晓行数，还得添加仅用于样式的HTML元素，希望找到更优方案。以下是现有实现代码：

现有实现代码 #

CSS #

body {
  margin: 0;
}

.grid-wrapper {
  --grid-margin: 10px;
  --grid-cell-size: 100px;
  --grid-line-thickness: 2px;
  --grid-line-offset: calc(0px - var(--grid-line-thickness));
  
  --grid-color: darkgray;
  --grid-line-color: gray;
  
  position: relative;
  margin: var(--grid-margin);
  width: calc(3 * var(--grid-cell-size));
}

.grid {
  display: grid;
  gap: var(--grid-line-thickness);
  grid-template-columns: repeat(3, var(--grid-cell-size));
  grid-auto-rows: var(--grid-cell-size);
}

.grid > div {
  width: 100%;
  height: 100%;
  background: var(--grid-color);
}

.grid-line-row {
  width: 110%;
  left: -5%;
  position: absolute;
  height: var(--grid-line-thickness);
  background: var(--grid-line-color);
  top: var(--grid-line-offset);
}

.grid-line-row:nth-child(2) {
  top: calc(var(--grid-line-offset) + 
    var(--grid-line-thickness) + 
    var(--grid-cell-size));
}

.grid-line-row:nth-child(3) {
  top: calc(var(--grid-line-offset) + 
    2 * var(--grid-line-thickness) + 
    2 * var(--grid-cell-size));
}

.grid-line-row:nth-child(4) {
  top: calc(var(--grid-line-offset) + 
    3 * var(--grid-line-thickness) + 
    3 * var(--grid-cell-size));
}

.grid-line-col {
  height: 110%;
  top: -5%;
  position: absolute;
  width: var(--grid-line-thickness);
  background: var(--grid-line-color);
  left: var(--grid-line-offset);
}

.grid-line-col:nth-child(6) {
  left: calc(var(--grid-line-offset) +
    var(--grid-line-thickness) + 
    var(--grid-cell-size));
}

.grid-line-col:nth-child(7) {
  left: calc(var(--grid-line-offset) + 
    2 * var(--grid-line-thickness) + 
    2 * var(--grid-cell-size));
}

.grid-line-col:nth-child(8) {
  left: calc(var(--grid-line-offset) +
    3 * var(--grid-line-thickness) + 
    3 * var(--grid-cell-size));
}

HTML #

<body>
    <div class="grid-wrapper">
        <div class="grid">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="grid-line-row"></div>
        <div class="grid-line-row"></div>
        <div class="grid-line-row"></div>
        <div class="grid-line-row"></div>
        <div class="grid-line-col"></div>
        <div class="grid-line-col"></div>
        <div class="grid-line-col"></div>
        <div class="grid-line-col"></div>
    </div>
</body>

优化方案 #

可以通过CSS背景渐变+自定义属性实现，无需额外HTML元素，也不需要提前固定行数/列数，完全适配N×M的动态网格：

实现思路 #

1. 给网格容器的父元素设置双层背景渐变，分别模拟横向和纵向网格线，渐变间距刚好对齐网格的gap；
2. 用自定义属性动态计算网格总尺寸，适配任意行列数；
3. 通过父元素的padding控制网格线向外延伸的长度。

优化后代码 #

CSS

body {
  margin: 0;
}

.grid-wrapper {
  --grid-extend-length: 20px; /* 网格线向外延伸的长度 */
  --grid-cell-size: 100px;
  --grid-line-thickness: 2px;
  --grid-gap: var(--grid-line-thickness);
  --grid-color: darkgray;
  --grid-line-color: gray;
  
  /* 动态计算网格总宽高 */
  --grid-total-width: calc(var(--grid-cols) * var(--grid-cell-size) + (var(--grid-cols) - 1) * var(--grid-gap));
  --grid-total-height: calc(var(--grid-rows) * var(--grid-cell-size) + (var(--grid-rows) - 1) * var(--grid-gap));
  
  margin: var(--grid-extend-length);
  padding: var(--grid-extend-length); /* 让渐变延伸到网格外 */
  background: 
    /* 横向网格线 */
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--grid-cell-size),
      var(--grid-line-color) var(--grid-cell-size),
      var(--grid-line-color) calc(var(--grid-cell-size) + var(--grid-gap))
    ),
    /* 纵向网格线 */
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent var(--grid-cell-size),
      var(--grid-line-color) var(--grid-cell-size),
      var(--grid-line-color) calc(var(--grid-cell-size) + var(--grid-gap))
    );
  background-size: var(--grid-total-width) calc(var(--grid-cell-size) + var(--grid-gap)), calc(var(--grid-cell-size) + var(--grid-gap)) var(--grid-total-height);
  background-position: center top, left center;
}

.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--grid-cols), var(--grid-cell-size));
  grid-auto-rows: var(--grid-cell-size);
}

.grid > div {
  background: var(--grid-color);
}

HTML

<body>
    <!-- 3列3行网格 -->
    <div class="grid-wrapper" style="--grid-cols:3; --grid-rows:3;">
        <div class="grid">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    
    <!-- 4列2行网格，直接修改自定义属性即可 -->
    <div class="grid-wrapper" style="--grid-cols:4; --grid-rows:2;">
        <div class="grid">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>

方案优势 #

• 无冗余HTML元素，结构简洁；
• 通过--grid-cols和--grid-rows自定义属性，一键修改行列数，适配任意N×M网格；
• 网格线自动对齐gap位置，延伸长度可通过--grid-extend-length灵活调整；
• 无需针对不同行列编写复杂的定位样式，维护成本更低。

内容的提问来源于stack exchange，提问作者Lovethenakedgun