Как я могу сделать начало горизонтальной сетки сетки на основе начальной загрузки на 2-м столбце контейнера, но кровоточ ⇐ Html

[Anonymous]

У меня есть горизонтальная временная шкала прокрутки, которая построена с использованием макета сетки CSS внутри начальной загрузки .container. Offset). < /p>
Как я могу отображать элементы в областях кровотечения-прямо с начала, слева, когда я начинаю прокручивать?

Код: Выделить всё

:root {
--bs-gutter-x: 15px;
}

.row {
--bs-gutter-x: 15px;
}

.container {
background: orange;
border: 5px dashed red;
}

.pd-timeline {
position: relative;
background-color: lightblue;
padding: 50px 0;
}
.pd-timeline__carousel {
background-color: yellowgreen;
display: grid;
grid-template-rows: auto auto;
grid-auto-flow: column;
grid-auto-columns: calc( (100% - 11 * 30px) / 12 );
gap: 30px;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.pd-timeline__item {
grid-column: span 3;
background: #f5f5f5;
scroll-snap-align: start;
min-width: 0;
}
.pd-timeline__item.top {
grid-row: 1;
align-self: end;
}
.pd-timeline__item.bottom {
grid-row: 2;
align-self: start;
}
.pd-timeline__time {
font-size: 20px;
display: inline-block;
color: blue;
margin-bottom: 10px;
}
.pd-timeline__name {
font-size: 15px;
color: purple;
margin-bottom: 2px;
}
.pd-timeline__content > *:last-child {
margin-bottom: 0;
}< /code>








2000
Element 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a sem nec metus laoreet mattis at quis enim.



2001
Element 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a sem nec metus laoreet mattis at quis enim.



2002
Element 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a sem nec metus laoreet mattis at quis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a sem nec metus laoreet mattis at quis enim.



2003
Element 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Aenean a sem nec metus laoreet mattis at quis enim.



2004
Elemnt 4

Lorem ipsum dolor sit amet.



2005
Element 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a sem nec metus laoreet mattis at quis enim.



2006
Elemnt 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a sem nec metus laoreet mattis at quis enim.



2007
Element 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a sem nec metus laoreet mattis at quis enim.



2008
Element 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a sem nec metus laoreet mattis at quis enim.



2009
Element 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a sem nec metus laoreet mattis at quis enim.



2010
Element 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a sem nec metus laoreet mattis at quis enim.

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