Как создать фотогалерею с неявной сеткой в 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

[Aleksey Solovyev]

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

Статья git