假设有一个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>这是一个适用于任意数量的行/列的想法。我依靠单个伪元素和渐变来创建线条。
.grid {
--grid-cell-size: 100px;
--grid-line-thickness: 2px;
--grid-line-offset: 8px;
--grid-line-color: gray;
display: grid;
gap: var(--grid-line-thickness);
grid-template-columns: repeat(3, var(--grid-cell-size));
grid-auto-rows: var(--grid-cell-size);
width: fit-content;
margin: 10px;
position: relative;
}
.grid:before {
content:"";
position: absolute;
inset: calc(-1*var(--grid-line-offset));
--c: #0000 0 var(--grid-cell-size),
var(--grid-line-color) 0
calc(var(--grid-cell-size) + var(--grid-line-thickness));
background:
repeating-linear-gradient(90deg,var(--c))
var(--grid-line-offset) 0/
calc(100% - 2*var(--grid-line-offset)) 100%,
repeating-linear-gradient(var(--c))
0 var(--grid-line-offset)/
100% calc(100% - 2*var(--grid-line-offset));
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>