В данной заметке описать адекватный способ создания адаптивной 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;
}
1 комментарий
Также как и по горизонтали по умолчанию элементы сетки выравниваются по верхнему краю. С опцией originTop можно изменить поток элементов по вертикали и задать выравнивание снизу вверх, примерно как в тетрисе