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>

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

    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>

Share Improve this question edited Nov 21, 2024 at 5:53 asked Nov 21, 2024 at 0:04 Lovethenakedgun 86710 silver badges26 bronze badges

I would just have an extra grid row top and bottom, and an extra grid column left and right, and then have those lines as borders. You can set how wide/tall those extra rows and columns are. – ralph.m Commented Nov 21, 2024 at 3:22
@ralph.m - Yeah right. So instead of a 3xN, make it a 5x(N+2), and then always just use 4 lines (or even a negatively positioned box-shadow) to "hide" the edges of the grid, and then the outer rows just have background: <whatever> so that you only see the grid-lines? The only thing there would be an nth-child or equivalent selector to force grid items into the middle 3 columns & skip the first / last row, yeah? Or would you still need empty <div>'s to fill the gaps? Was hoping for something "generic" based on how many columns I need & if the number of rows was just "data dependent." – Lovethenakedgun Commented Nov 21, 2024 at 5:51

Add a comment |

1 Answer 1

Sorted by: Reset to default 2

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Extend "grid-lines" beyond a CSS grid - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)