Как сделать сетку изображений как в ВК?

Question

[swaro]

Здравствуйте! У меня вот такой интересный вопрос: как сделать сетку изображений, как это сделано в ВК?
На данный момент у меня это реализовано так: бекенд считает сколько изображений у поста и сам готовит для него HTML код, а что с CSS уже проблемы. Как именно строить эту сетку? Я уже догадываюсь, что для каждого количества изображений своя сетка.

Comments

[Шохрух Шаймардонов]

А не проще gridы? Или же либы которые строят гриды

[swaro]

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

[Шохрух Шаймардонов]

swaro, вам сюда

Answer 1

[Арсений Матыцин]

Можно использовать да, заготовки под условия, или написать алгоритмы автоматической разбивки соотношения, и на выходе передавать это, допусти в качестве коэффициента flex-grow. Дальше на сегодняшний день полноценно поможет справиться object-fit.

Answer 2

[profesor08]

На гридах строишь сетку, и в зависимости от размера изображения, указываешь для него сколько оно занимает строк по вертикали и столбцов по горизонтали. На бэкенде надо будет определить сколько изображение должно занимать места, и устанавливаешь ему доп. атрибуты или классы, к которым привязываешь стили на фронте.