admin管理员组

文章数量:1332352

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

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>

  • css
  • css-grid
Share Improve this question edited Nov 21, 2024 at 5:53 Lovethenakedgun asked Nov 21, 2024 at 0:04 LovethenakedgunLovethenakedgun 86710 silver badges26 bronze badges 2
  • 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

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 quotgridlinesquot beyond a CSS gridStack Overflow

版权声明：本文标题：Extend &quot;grid-lines&quot; beyond a CSS grid - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742321552a2452889.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。