HelWorld

Пишу своё решение на данный вопрос. Всё, что требуется в данном случае - создать несколько дополнительных колонок, размер у которых будет равен расстоянию от края картинки в одной из 2-х строк до края картинки в другой строке. При этом горизонтальный скролл убирается с помощью overflow, чтобы с помощью js была возможность позже пролистывать элементы, нажимая на кнопки.

Код на CSS (решение с помощью grid):

.slider1__content {
	display: grid;
	grid-template-columns: 321px 149px 220px 101px 369px 321px 99px auto;
	grid-template-rows: repeat(2, 300px);
	overflow: scroll;
	overflow-x: hidden;
}
.slider1__img {
	max-width: 470px;
	width: 100%;
	height: 300px;
	object-fit: cover;
}
.slider1__img:first-child {
	grid-column: 1 / 3;
}
.slider1__img:nth-child(2) {
	grid-column: 3 / 5;
}
.slider1__img:nth-child(3) {
	grid-column: 5 / 6;
}
.slider1__img:nth-child(4) {
	grid-column: 6 / 8;
}
.slider1__img:nth-child(5) {
	grid-column: span 1;
}
.slider1__img:nth-child(6) {
	grid-column: 1 / 2;
}
.slider1__img:nth-child(7) {
	grid-column: 2 / 4;
}
.slider1__img:nth-child(8) {
	grid-column: 4 / 6;
}
.slider1__img:nth-child(9) {
	grid-column: 6 / 7;
}
.slider1__img:last-child {
	grid-column: span 2;
}

input[list="test"]::-webkit-calendar-picker-indicator {
  display: none !important;
}