Как гармонично встроить в сетку элемент нестандартного размера?

Question

[tantumus21]

Есть сетка, по которой выстраиваются элементы (товары). Элементы добавляются в сетку динамически, так как отображаемые товары часто меняются. Каждый элемент сетки имеет свой вес - насколько товар популярен. Если вес превышает определенное число, то элемент, который его отображает, становится больше. Примерно, это должно выглядеть как-то так
Как сделать так, чтобы большие элементы не ломали сетку, а "обтекались" элементами поменьше.
Знаю, есть Masonry, но хотелось бы обойтись без него. Можно ли это сделать средствами одного CSS?

Comments

[Антон Литвиненко]

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

[tantumus21]

Антон Литвиненко, врод возможно. Совместить вариант предложенный Ankhena с динамической передачей класса элементу - и думаю получится

Answer 1

[Ankhena]

Можно
Гридами и grid-auto-flow: row dense;

Большим элементам задаете

grid-column: span 2;
grid-row: span 2;

Comments

[tantumus21]

круто))) спасибо

[Ankhena]

низкомолекулярный макрос, тут как, чем меньше всего попадало в поле зрения, тем больше интересного можно найти.
Так что даже не знаю, что крутого можно придумать именно в сетке.
Можно лишить верстальщика мозга каким-нибудь затейливым перестроением в адаптиве, это да. Но пользователь не узнает об этом.

[Ankhena]

низкомолекулярный макрос, да даже сдвинуть немножко вверх (или вниз) нечетные столбики, уже будет получше.
Эффективнее у дизайнеров спрашивать.