Как сделать адаптивную masonry сетку только на css

В данной заметке описать адекватный способ создания адаптивной masonry сетки на чистом css.

Для начала составим каркас html:

Теперь напишем css стили:

Теперь все div блоки класса item выстроятся в 4 колонки.

Чтобы добавить адаптивность напишем следующий css код:

Свойству column-count  нужны префиксы:

 

1 комментарий

  • Также как и по горизонтали по умолчанию элементы сетки выравниваются по верхнему краю. С опцией originTop можно изменить поток элементов по вертикали и задать выравнивание снизу вверх, примерно как в тетрисе

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Подтвердите, что Вы не бот — выберите человечка с поднятой рукой: