Wie erzeugt ich einen sauberen kontinuierlichen Gitterrandeffekt mit Lücken? ⇐ CSS

[Anonymous]

Ich versuche, ein Gitterlayout mit Rückenwind-CSS (v4.1) zu erstellen, wobei: < /p>

es gibt eine Lücke zwischen Gegenständen (z. B. Gap-10) < /li>
, aber die Grenz-Linus sollten über den gesamten Container (wie Graph Paper) < /li>

Die Linien sollten die Linien mit dem Square mit dem Square mit dem Squises, der mit dem Squises-Square, nicht nur mit dem Square geordnet sind, mit dem Skly-Skly-Al-Allt. Umrissen einzelne Zellen.

* {
box-sizing: border-box;
}
@utility border-line {
content: "";
display: block;
position: absolute;
background-color: #ffffff;
}

@utility border-line-vertical-right {
@apply border-line;
height: 200vh;
width: 1px;
right: 0;
top: 50%;
transform: translateY(-50%);
}

@utility border-line-vertical-left {
@apply border-line;
height: 200vh;
width: 1px;
left: 0;
top: 50%;
transform: translateY(-50%);
}

@utility border-line-horizontal-top {
@apply border-line;
height: 1px;
width: 200vw;
top: 0;
left: 50%;
transform: translateX(-50%);
}

@utility border-line-horizontal-bottom {
@apply border-line;
height: 1px;
width: 200vw;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}





A

B

C

D

E



< /code>
< /div>
< /div>
< /p>
Diese Art von Funktionen, aber das Problem ist: < /p>

Einige Zeilen überlappen andere Abschnitte. Unsicherbar. Reinigerer Weg? Nun. CSS?