Как сделать такую галерею при помощи css?

Question

[Andrew Morozov]

Как сделать правильно такую галерею?
Количество фото может быть разное...
Размеры фото могут быть разные, фото в галереи идут от больших к маленьким (на скрине примеры)...

Примеры галереи... (с разным количество фото)

Comments

[Ankhena]

Как сделать правильно такую галерею?

Как сделать такую галерею при помощи css?

Так вот, разумно - это не страдать ерундой и сделать её на JS.

Например, взяв swiper.js

[Andrew Morozov]

Ankhena, Так это не слайдер, это именно блок в который могут добавляться изображения разных размеров и в разном количестве

[Ankhena]

mark1505, на последнем скрине точно слайдер, там превью и большая фотка.

Покажите, как это должно выглядеть, если их 50.

Но не важно. Как вы на css планировали сортировать фото по размеру? Они и на js в ровную сетку без дыр могут не встать.
Смотрите в сторону Masonry или Isotope - они могут сделать красиво.
У гридов есть dense (это с меньшим количеством дыр и не сортировано)
Если сначала отсортировать, то потом можно и флексами (выглядеть будет страшно)

[Andrew Morozov]

Ankhena, Это 100% не слайдер, при нажатии на картинку будет открываться изображение в большем размере, типа той же самой галереи в lightbox...

Но нужно сделать как-то то что на скринах, где разное количество изображений, с разными размерами
Вот ещё такой пример в дизайне есть

Второй день ломаю голову как это нормально сделать.. ( использую React JS \ scss )

[Ankhena]

mark1505, если не листаются большие фотки, то это обычные табы (с точки зрения js) .

[Andrew Morozov]

Ankhena, Меня больше интересует как расположить фото так как на скрине

[Ankhena]

mark1505, блоки в один ряд располагаются флексами, гридами, инлайн-блоками и даже флоатами. И это не все варианты.