Как реализовать такую сетку?

Question

[Владимир Хаттер]

Доброго времени суток!
Есть задача отобразить категории товаров по сетке как на фото.

Но задача усложняется так как не известны размеры загружаемых картинок, а также пропорции хаотичны. А еще количество не известно.
Подскажите как решить?!

Answer 1

[GeekFromUa]

Используй Masonry библиотеку

Comments

[Владимир Хаттер]

А не подскажите как именно там картинки именно так расставить?

[GeekFromUa]

Владимир Хаттер: Ну там у них на сайте есть мануал как подключать, вот еще в гугле на русском нашел wp-kama.ru/id_2818/masonry-vyivod-html-blokov-v-vi... Картинки он сам автоматом выбирает как поставить в зависимости от размеров

[Владимир Хаттер]

Спасибо! Но проблема в том что если картинки квадратные он их же просто "кирпичной кладкой" выставит а надо именно так как на картинке. как быть? Я вижу Вы профессионал. Подскажите пожалуйста!

[GeekFromUa]

Владимир Хаттер: не совсем понимаю что Вы хотите сделать.

[xmoonlight]

Владимир Хаттер: "Я вижу Вы профессионал. Подскажите пожалуйста!" - интересный ход)

[GeekFromUa]

xmoonlight: хаха, дада ))))

Answer 2

[srko]

Так (платно, JS, но подойдет для всех ваших неизвестных параметров) или так (сама сетка) с nth-child и object-fit для картинок, но у object-fit плохо с IE (поэтому либо полифилл, либо смотрите в сторону background).

Надеюсь, помог чем-то ;-)

Update: Masonry бесплатна, берите ее.