В данной заметке описать адекватный способ создания адаптивной masonry сетки на чистом css.
Для начала составим каркас html:
|
1 2 3 4 5 6 7 8 9 10 |
<div class='masonry-wrapper'> <div class='item'>Тут содержимое блока</div> <div class='item'>Тут содержимое блока</div> <div class='item'>Тут содержимое блока</div> <div class='item'>Тут содержимое блока</div> </div> |
Теперь напишем css стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.masonry-wrapper { column-count: 4; column-gap: 1em; } .item { display: inline-block; margin: 0 0 1em; width: 100%; position: relative; } |
Теперь все div блоки класса item выстроятся в 4 колонки.
Чтобы добавить адаптивность напишем следующий css код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
@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 нужны префиксы:
|
1 2 3 4 5 6 7 8 9 10 11 |
.masonry-wrapper { -webkit-column-count: 4; -moz-column-count: 4; -ms-column-count: 4; -o-column-count: 4; column-count: 4; } |
1 комментарий
Также как и по горизонтали по умолчанию элементы сетки выравниваются по верхнему краю. С опцией originTop можно изменить поток элементов по вертикали и задать выравнивание снизу вверх, примерно как в тетрисе