Как занять свободное место под блоком нижестоящим блоком?

Question

[keker1337]

Представьте стандартную ситуацию: есть контейнер внутри которого стоят айтемы с какой-то информацией, допустим по два в ряд. У айтемов в первом ряду разная высота, скажем, у первого меньше.
Вопрос: можно ли сделать так, чтобы айтем на следующей строке занимал свободное пространство первой строки(где один из блоков ниже)?
Прикрепляю визуализацию.

При этом нужно чтобы это были именно ряды, а не два столбца стоящих рядом или column с ограниченной высотой на флексах. Нельзя стобцами/колонками, потому на адаптиве визуально порядок айтемов будет неверным.
Пробовал и на флоатах и на инлайн-блоках, но везде айтемы становятся под самый высокий блок в предыдущем ряду. Слышал что такое можно реализовать на гридах, с которыми я еще слабо знаком - рядами тоже не вышло.

Comments

[Rustam Bainazarov]

То, что вы хотите, называется Masonry Grid. Нормально на чистом CSS это сделать невозможно.

Inline-block или column-count — полурешения со своими недостатками. На grid это тоже не сделать. Это все будут псевдо-реализации Masonry с ограничениями по высоте отдельных блоков или с непонятным порядком элементов, ограничениями по высоте сетки и т. д.

Для этого есть JS-плагины, самый популярный из которых — https://masonry.desandro.com/. Настройка этого плагина занимает минуту. У него всё есть, включая адаптивность.

[iBird Rose]

Рустам Байназаров, +1
пиши уж сразу ответом

[Rustam Bainazarov]

iBird Rose, LOL. Всё время забываю это делать.

Answer 1

[Rustam Bainazarov]

То, что вы хотите, называется Masonry Grid. На текущий момент нормально на чистом CSS это сделать невозможно.

Inline-block или column-count — полурешения со своими недостатками. На grid это тоже не сделать. Это все будут псевдо-реализации Masonry с ограничениями по высоте отдельных блоков или с непонятным порядком элементов, ограничениями по высоте сетки и т. д.

Для этого есть JS-плагины, самый популярный из которых — https://masonry.desandro.com/. Настройка этого плагина занимает минуту. У него всё есть, включая адаптивность.

Answer 2

[Олег]

flexbox

Comments

[keker1337]

Вы внимательно прочитали пост? Если да, можно по конкретней, пожалуйста, потому что мне не известен ни один способ реализации подобного на флексах без столбцов и режима column.

[Олег]

keker1337, Видел в вопросе ниже.
Посмотрите в сторону masonry

Answer 3

[sldo_ru]

Попробуй посмотреть свойства Grid; Такая конструкция должна помочь:

elem {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 1em;
}

Данное решение будет адаптивным для всех экранов.

Comments

[keker1337]

Спасибо за ответ!
Выходит тоже, что и на флексах при align-items: stretch


Проясню на всякий случай еще раз: я хочу не чтобы айтем растянулся по высоте рядом стоящего, я хочу чтобы это место занял нижестоящий блок(третий).