Задать вопрос
@keker1337

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

Представьте стандартную ситуацию: есть контейнер внутри которого стоят айтемы с какой-то информацией, допустим по два в ряд. У айтемов в первом ряду разная высота, скажем, у первого меньше.
Вопрос: можно ли сделать так, чтобы айтем на следующей строке занимал свободное пространство первой строки(где один из блоков ниже)?
Прикрепляю визуализацию.
5eb8858e07e19980599039.png
При этом нужно чтобы это были именно ряды, а не два столбца стоящих рядом или column с ограниченной высотой на флексах. Нельзя стобцами/колонками, потому на адаптиве визуально порядок айтемов будет неверным.
Пробовал и на флоатах и на инлайн-блоках, но везде айтемы становятся под самый высокий блок в предыдущем ряду. Слышал что такое можно реализовать на гридах, с которыми я еще слабо знаком - рядами тоже не вышло.
  • Вопрос задан
  • 655 просмотров
Подписаться Простой 3 комментария
Решение пользователя Rustam Bainazarov К ответам на вопрос (3)
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
То, что вы хотите, называется Masonry Grid. На текущий момент нормально на чистом CSS это сделать невозможно.

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

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