Нарисуйте сепараторы линии на сетке [закрыто] ⇐ CSS

[Anonymous]

I am working on a Gantt chart but for the sake of this question trying to figure out how to add vertical gridlines to the following element, with placeholders instead of actual elements.
For context, the following code uses Tailwind (v4 but it would work the same with Tailwind v3) classes, so the CSS file is generated.



Column 1
Column 2
Column 3 (Month 1)
Column 4 (Month 2)
Column 5 (Month 2)



Data 1.1Data 2.1Data 3.1 (bar)
Data 1.2Data 2.2Data 3.2 (bar)
Data 1.3Data 2.3Data 3.3 (bar)



, который воспроизводит в:

vor ver ver ver ver ver ver. Я думал о суперпозиции div элементов в мои столбцы сетки, с div + div {border-left: 1px} Тип типа CSS: как div принимает точно такую же область экрана, что и фактические столбцы, границы были бы натурально определены или определяются, что все может быть определено, я мог быть определен, что может быть определено, я мог быть определен, что может быть установлена, я не определялся, что в конце концов. Те же значения и имеют линии, нарисованные, например, тип правила. Поскольку это не так, я думал о суперпонировании другого подсера, чтобы он мог наследовать ширину столбца родительского элемента. Для того, чтобы сделать наложенную сетку более заметной на следующем снимке экрана, добавленным div также получают цвет фона.


Column 1
Column 2
Column 3 (Month 1)
Column 4 (Month 2)
Column 5 (Month 2)



Data 1.1Data 2.1Data 3.1 (bar)
Data 1.2Data 2.2Data 3.2 (bar)
Data 1.3Data 2.3Data 3.3 (bar)

*+*]:border-s-1 [&>*:nth-child(odd)]:bg-blue-300/50">




, в результате чего:


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