Нарисуйте сепараторы линии на сетке ⇐ Html

[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)





, который, как я намерен, это. Div принимает точно такую же область экрана, что и фактические столбцы, границы, естественно, были бы нарисованы между ними. тип правила. Поскольку это не так, я думал о суперпонировании другого подсера, чтобы он мог наследовать ширину столбца родительского элемента. Для того, чтобы сделать наложенную сетку более видимой в следующем примере, добавленным div < /code> S дается цвет фона (синий).



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">


< /code>
< /div>
< /div>
< /p>
И, очевидно, моя проблема на этом этапе состоит в том, что добавленная сетка рендеры в полной шириной. воспроизведение проблемы; В качестве альтернативы, вы также можете скопировать/вставить мой код на детскую площадку Tailwind..relative {
position: relative;
}
.grid {
display: grid;
}
.grid-cols-\[auto_auto_300px_250px_300px\] {
grid-template-columns: auto auto 300px 250px 300px;
}
.col-span-full {
grid-column: 1 / -1;
}
.grid-cols-subgrid {
grid-template-columns: subgrid;
}
.items-center {
align-items: center;
}
.h-10 {
height: 2.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.bg-neutral-100 {
background-color: rgb(245 245 245);
}
.col-start-3 {
grid-column-start: 3;
}
.-col-end-1 {
grid-column-end: -1;
}
.absolute {
position: absolute;
}
.inset-0 {
inset: 0;
}
.\[\&\>\*\+\*\]\:border-s-1 > * + * {
border-inline-start-width: 1px;
}
.\[\&\>\*\:nth-child\(odd\)\]\:bg-blue-300\/50 > *:nth-child(odd) {
background-color: rgb(147 197 253 / 0.5);
}


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