Extend "grid-lines" beyond a CSS grid

Assuming an N-by-M grid of cells, how can I achieve the below effect.

I can make a 3x3 grid fine.

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

Adding gap spaces the elements out:

[A] [B] [C]

[D] [E] [F]

[G] [H] [I]

And I can fill the background to give the effect of grid-lines.

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

But is it possible to have grid-lines align within the gaps of a grid, and also "extend" beyond the grid by a set amount?

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

I've managed to "hack it" with absolutely positioned DIVs using formulas which reference the grid's custom properties to align themselves. But this requires me to know the number of rows ahead of time & insert HTML elements just for styling. Figured there must be a better way.

    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));
    }

<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>

Solution

Here is an idea that should work with any number of rows/columns. I am relying on a single pseudo element and gradients to create the lines.

.grid {
  --cell-size: 100px;
  --line-thickness: 2px;
  --line-offset: 8px;
  --line-color: gray;
  
  display: grid;
  gap: var(--line-thickness);
  grid-template-columns: repeat(3, var(--cell-size));
  grid-auto-rows: var(--cell-size);
  width: fit-content;
  margin: 10px;
  position: relative;
}
.grid:before {
  content:"";
  position: absolute;
  inset: calc(-1*var(--line-offset));
  --c: var(--line-color) 0 var(--line-thickness),
      #0000 0 calc(var(--cell-size) + var(--line-thickness));
  background:
    repeating-linear-gradient(90deg,var(--c)) 
      calc(var(--line-offset) - var(--line-thickness)) 0/
      calc(100% - 2*var(--line-offset) + 2*var(--line-thickness)) 100%,
    repeating-linear-gradient(var(--c)) 
      0 calc(var(--line-offset) - var(--line-thickness))/
      100% calc(100% - 2*var(--line-offset) + 2*var(--line-thickness));
  background-repeat: no-repeat;
  
}
.grid > div {
  background: darkgrey;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>