Я пытаюсь построить сетку с помощью сетки с помощью 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
