Как решить задачу с позиционированием?

Question

[Breeze1]

Есть задачка, не могу найти пути решения. Разметка сейчас во такая https://codepen.io/brezze/pen/erepjd
Блоки должны собираться как мозаика. Решил это через отрицательный маргин. Но не подходит по причине того, что эти блоки будут в фильтре. Для понимания скину ссылку на верстку. Кликните на вкладку UI+UX, наш блок будет налазить наверх из-за маргина aasoftware.com/case-studies.html

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

Comments

[Александр Цымбал]

К сожалению, без js-плагинов сделать подобную универсальную сетку, набор плиток в которой может быть совершенно разным - нельзя!
Есть такая новая технология как css grid layout, которая, возможно, частично поможет решить вашу задачу. Но, может быть, понадобится смена разметки и т.д. Да и поддержка grid браузерами пока далека от 100%.

[Breeze1]

Если есть возможность, подскажите как это сделать на grid. Я пока не изучал эту технология, флексов как-то с головой хватало до этого момента. Разметку нельзя менять потому что сам фильтр предпологает, чтобы все элементы которые фильтруются должны быть в одном контейнере

Answer 1

[Eugene Chefranov]

У плагина Isotope есть и фильтрация и сетка как вы хотите https://isotope.metafizzy.co/filtering.html

Answer 2

[Jumandjilos]

Css Grid, и проблема решена