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>1 Answer
Reset to default 2Here 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>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742321552a4421913.html
box-shadow) to "hide" the edges of the grid, and then the outer rows just havebackground: <whatever>so that you only see the grid-lines? The only thing there would be annth-childor 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