Как создать чистый эффект непрерывной границы сетки с пробелами? ⇐ CSS

[Anonymous]

Я пытаюсь построить сетку с помощью сетки с помощью CSS Tailwind CSS (v4.1), где: < /p>

Существует разрыв между предметами (например, Gap-10) < /li>
Но погранично Нарисуйте отдельные ячейки.

* {
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>
такого рода произведения, но проблема: < /p>

Некоторые строки перекрывают другие разделы. < /li>
Это трудно контролировать с z-index. UNSCALABLE. Путь? />
Почти та же проблема, которую я опубликовал вчера, и там я получил решение
, используя позиционирование якоря CSS, которое работает, но я хотел бы избежать с тех пор, как
он еще не полностью поддерживается в браузерах.
Как сделать псевдо-элемент полной ширины сетки, но Align с определенным элементом GRID в HailWind CSSS?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -with-gaps