Как выводить товары в такой сетке?

Question

[kamisarlapsha]

Привет! Есть следующая сетка:


Нужно в этой сетке правивильно выводить товары. То есть у какого то товара картинка на 1 контейнер, у другого на 2 контейнера вертикально, у третьего на 2 горизонтально, у четвертого на 4 контейнера. Вот и думаю, как нужно выводить их, чтобы все были на своих местах.

У меня был такой вариант, считать в php размер картинки и от этого отталкиваться, далее уже давая класс каждому элементу. Заранее спасибо!

Comments

[Rustam Bainazarov]

Grid. Masonry JS.

Ну или городить на flex + куча обёрток.

[kamisarlapsha]

Рустам Байназаров, да, сейчас у них демо посмотрел, там тоже добавляется класс, к элемнтам. Значит думаю нужно отходить от картинки товара, а дальше в зависимости от класса изменять высоту и ширину

Answer 1

[forspamonly2]

grid-auto-flow: row dense;