Как создать фотогалерею с неявной сеткой в CSS?

Question

[HelWorld]

Мне нужно создать вот такой вот слайдер, который растягивается на всю ширину экрана. При этом картинки в нём имеют разную ширину. 1-ая и 8-ая — 470px; 2-ая, 5-ая, 6-ая и 9-ая — 321px; 3-ая и 7-ая — 369px; 4-ая и последняя — 420px. Вопрос: как сделать это с помощью grid/flex так, чтобы не пришлось прописывать каждой картинки ширину, и при этом при сужении экрана картинки, которые вышли за пределы видимости, просто переставали показываться?



HTML-код:

<div class="slider1__content">
	<img class="slider1__img" src="assets/img/hz_photo-1.jpg" alt="visitor" />
	<img class="slider1__img" src="assets/img/hz_photo-2.jpg" alt="visitor" />
	<img class="slider1__img" src="assets/img/hz_photo-3.jpg" alt="visitor" />
	<img class="slider1__img" src="assets/img/hz_photo-4.jpg" alt="visitor" />
	<img class="slider1__img" src="assets/img/hz_photo-5.jpg" alt="visitor" />
	<img class="slider1__img" src="assets/img/hz_photo-6.jpg" alt="visitor" />
	<img class="slider1__img" src="assets/img/hz_photo-7.jpg" alt="visitor" />
	<img class="slider1__img" src="assets/img/hz_photo-8.jpg" alt="visitor" />
	<img class="slider1__img" src="assets/img/hz_photo-9.jpg" alt="visitor" />
	<img class="slider1__img" src="assets/img/hz_photo-10.jpg" alt="visitor" />
</div>

Answer 1

[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;
}

Answer 2

[Aleksey Solovyev]

Вот и понадобился сохраненный в закладках сайт!!!
Пример: https://xieranmaya.github.io/images/cats/cats.html
Такое?

Статья git