По-моему, проще (разумнее, логичнее, легче ищется и т.д.) сразу писать целиком класс, чем синтетически разбивать его на составные части, но чтобы было понятно добавлять комментарий в виде полного класса.
Ладно ещё, когда человек говорит, что ему норм использовать амперсанд для элементов. Но вот так...
mark1505, на последнем скрине точно слайдер, там превью и большая фотка.
Покажите, как это должно выглядеть, если их 50.
Но не важно. Как вы на css планировали сортировать фото по размеру? Они и на js в ровную сетку без дыр могут не встать.
Смотрите в сторону Masonry или Isotope - они могут сделать красиво.
У гридов есть dense (это с меньшим количеством дыр и не сортировано)
Если сначала отсортировать, то потом можно и флексами (выглядеть будет страшно)
Вы можете оперировать шириной и overflow.
Ширину колонок при этом задавать по контенту.