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

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

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

<div class='masonry-wrapper'>
    <div class='item'>Тут содержимое блока</div>
    <div class='item'>Тут содержимое блока</div>
    <div class='item'>Тут содержимое блока</div>
    <div class='item'>Тут содержимое блока</div>
</div>

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

.masonry-wrapper {
    column-count: 4;
    column-gap: 1em;
}

.item {
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
    position: relative;
}

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

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

@media all and (max-width: 1024px){
    .masonry-wrapper {
	column-count: 3;
    }
}

@media all and (max-width: 768px){
    .masonry-wrapper {
	column-count: 2;
    }
}

@media all and (max-width: 480px){
    .masonry-wrapper {
	column-count: 1;
    }
}

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

.masonry-wrapper {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    -ms-column-count: 4;
    -o-column-count: 4;
    column-count: 4;
}