主页 / user-3577502

Lovethenakedgun's questions

Martin Hope
Lovethenakedgun
Asked: 2024-11-21 08:04:41 +0800 CST
  • 6

假设有一个 N×M 的单元格网格，我该如何实现以下效果。

我可以制作出 3x3 的网格。

[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]|
`-----------`

但是，是否有可能让网格线在网格的间隙内对齐，并且还可以“延伸”到网格之外一定的量？

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

我设法使用绝对定位的 DIV 来“破解”它，使用公式引用网格的自定义属性来对齐自身。但这要求我提前知道行数并插入 HTML 元素以进行样式设置。我想一定有更好的方法。

    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