Как адекватно сделать сетку?

Question

[Roweb]

<div class="grid">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

Камим образом лучше такое реализовать?
Желательно:
1. Блоки должны идти в потоке слева на право, без доп оберток
2. Высота должна зависить от контента
3. Без js

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

Comments

[approximate solution]

Я бы на Вашем месте по мимо одной картинки скинул 3, у вас сетка работает минимум в 3х брейкпоинтах, desk, tablet, mobile, и что бы правильно всё спозиционировать - нужно видеть куда уйдут боковые блоки, вверх или вниз к примеру, либо поведение блоков вообще будет другое.

[Roweb]

approximate solution, пока об этом не думали

Answer 1

[approximate solution]

https://codepen.io/jensimmons/pen/QWjqbJj - это больше похоже на Masonry) Загляните в codepen, там в адаптиве Multicolumn как раз похож на такую сетку.
https://css-live.ru/css/priklyucheniya-masonry-ras...