Masonry вёрстка только на CSS3

Стиль Masonry который впервые представил Pinterest в теперь уже далёком 2011 году, вдохновил многих верстальщиков снова и снова пробовать создавать нечто подобное, выдумывая всё новые способы и методы. Однако, большинство из них основаны на применении JavaScript, что не всегда удобно и оправдано. Сегодня же мы с вами будем по шагам верстать сетку блоков в стиле Masonry при помощи только лишь возможностей, которые предоставляет нам CSS3, без применения каких-либо скриптов, и плагинов Jquery. Эта статья опубликована при участии и поддержке сайта megaxchange.com, предлагающего самый выгодный курс обмена perfect money usd на Яндекс.Деньги, а также любую другую электронную валюту. Итак, начнём наш урок.

Кирпичная кладка Masonry при помощи свойств CSS3

Никаких специальных хаков и ухищрений нам не потребуется, все что нам нужно - свойства столбцов, которыми мы и будем манипулировать. Действительно, column-count - это прямо-таки магическая возможность, появившаяся в CSS3. Оно позволяет добавить ряд столбцов внутрь любого не-строкового (не имеющего свойства display:inline;) элемента. Дочерние элементы выравниваются по указанному числу столбцов, и укладываются наподобии Masonry-блоков. А для разделения между ними мы будем вставлять узкие пустые столбцы, имитирующие шов в кирпичной кладке.

Для начала, у нас существует контейнер DIV, который содержит нашу кладку. Зададим для него класс .masonry, а также класс .item для всех дочерних элементов.

<div class="masonry">
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="item">...</div>
... ...
<div class="item">...</div>
</div>

Теперь наступает самая важная часть, CSS. Применив свойство column-count для родителя (.masonry), его дочерние элементы (.items) будут автоматически расположены в соответствии со значением, которое мы зададим. Для того, чтобы дочерние блоки правильно распределились внутри кладки, важно установить их отображение в качестве блочно-строчного элемента со 100% шириной.

.masonry {
column-count: 4;
column-gap: 1em;
}
.item {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}

Такова основная идея создания "кирпичной кладки" в стиле Masonry при помощи одних лишь возможностей CSS3. Естественно, всё вышесказанное будет действовать только в современных браузерах, и если вы ориентируетесь на тех немногих пользователей, которые до сих пор сидят на IE ниже 9 версии, данный пример - не для вас, и без специального плагина Jquery вам не обойтись.

Что дальше? Расположить блоки по столбцам мы смогли, но родительский элемент всё ещё имеет плавающую ширину на весь размер окна браузера. Естественно, дальше необходимо добавить адаптивность к нашим кирпичикам, так как ради неё всё и затевалось.

Адаптивная вёрстка Masonry на CSS3

Для придания вёрстке адаптивности, как обычно, воспользуемся @media, и зададим количество дочерних блоков <DIV> на базовых точках 1100, 900, 700 и 400 пикселей.

@media only screen and (min-width: 400px)
{ .masonry { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } }
@media only screen and (min-width: 700px)
{ .masonry { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } }
@media only screen and (min-width: 900px)
{ .masonry { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } }
@media only screen and (min-width: 1100px)
{ .masonry { -moz-column-count: 5; -webkit-column-count: 5; column-count: 5; } }

Вот, собственно, и всё. Конечно, это только скелет для сетки Masonry, который вам ещё предстоит красиво оформить, но он работает, притом, не загружая ваш сайт лишними скриптами.

1945 просмотров
Теги: вё, masonry, html5, css3

Комментарии

Нет комментариев. Ваш будет первым!