Masonry — блоки в виде кирпичной кладки на чистом css. Используем Masonry для добавления сеточного стиля записей в WordPress Что такое вывод в "кирпичном" формате

Всем привет! Сегодня я бы хотел рассказать о том, как можно без плагинов и скриптов сделать блоки в виде кирпичной кладки (masonry с англ. — кирпичная кладка), то есть блоки разной высоты будут красиво друг под другом располагаться без больших пустых отступов. Да! Всё это можно очень легко сделать с помощью css.

В css есть свойство, с помощью которого можно создать многоколоночный текст или блоки. Им и воспользуемся.

Свойство так и называется columns. Это универсальное свойство, которое позволяет сразу задать ширину и количество колонок. Подробнее о нём вы можете почитать в хорошем css справочнике .

Итак, всё на самом деле очень просто. Например, у нас есть 6 элементов разной высоты, но одинаковой ширины. Яркий пример — это сайдбар (боковая колонка) на сайтах. Тут все блоки одинаковой ширины, но разной высоты. Обычно в мобильной версии сайта сайдбар располагают после основного контента, внизу сайта, а сам контент делают на всю ширину экрана. Естественно так же в одну колонку располагать сайдбар нерационально, так как по бокам будет много свободного места, особенно, если смотреть с планшета.

Но, если блокам задать свойство display: inline-block , то они автоматически, если хватает ширины контейнера, расположатся в несколько колонок. Однако всё может выглядеть не очень красиво:

Согласитесь, эти отступы между блоками совсем не смотрятся. Поэтому это срочно нужно исправить! Для этого к блоку контейнера, в котором располагаются блоки, нужно добавить необходимые стили:

Moz-columns: 300px auto; -webkit-columns: 300px auto; columns: 300px auto;

Для кроссбраузерности используем свойства для Firefox и Webkit браузеров(Chrome, Safari, Android). Например мы расположим блоки с помощью маркированного списка тогда стили для примера на картинке будут выглядеть так:

Ul { width: 1050px; -moz-columns: 300px auto; -webkit-columns: 300px auto; columns: 300px auto; } li { display: inline-block; box-shadow: 0 0 8px #555; list-style: none; padding: 10px; width: 300px; margin-bottom: 30px; vertical-align: top; }

В таком случае блоки будут располагаться в несколько колонок минимальной шириной 300px, а количество колонок будет автоматически определяться браузером. Это удобно для создания адаптивности. В данном случае будет 3 колонки, и вот как это будет выглядеть:

Ширину контейнера(1050px) придётся подобрать, если хотите, чтобы расстояние между блоками по вертикали совпадало с расстоянием по горизонтали. Иначе ширина между колонками установится браузером автоматически. Есть свойство column-gap , которое задаёт расстояние между колонками. Но в данном случае оно будет работать не так, как хочется.

Есть другой вариант: для блоков нужно установить свойство width:100%. Также, если установлено свойство padding, как в моём случае, то необходимо установить свойство box-sizing: border-box. Теперь можно смело добавлять к контейнеру свойство column-gap, чтобы установить расстояние между колонками. Так оно будет работать как нужно.

Согласитесь, так смотрится гораздо лучше! Так же вы сможете расположить «div» блоки внутри контейнера «div». Либо, если вам нужно распределить текст на несколько колонок то, просто в тег «p» с, например, классом «text» добавляем нужный текст и для этого класса прописываем свойство columns .

Вот и всё! Так просто без лишних скриптов можно расположить блоки в виде кирпичной кладки или текст в несколько колонок. Но учтите, что в данном случае будет красиво смотреться только, если блоки будут одинаковой ширины. В другом случае остаётся только использовать хороший скрипт masonry . Скрипт автоматически абсолютно позиционирует каждый блок. Но это уже другая тема…

На этом всё! Если появились какие-то вопросы или замечания, оставляйте их в комментариях. Удачи!

В разделе блог. Данная фото тема WordPress будет нашим примером, но Вы наверняка видели использование jQuery Masonry и на других сайтах WordPress.

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

На данном примере Вы можете увидеть принцип работы jQuery Masonry до и после использования:

Как Вы видите результат на лицо, если Вы использовать css float: left, то остаются пустые промежутки, необходимо использовать css position, которое довольно проблематично настроить, можно, НО зачем, в этом на поможет Masonry.

Masonry можно использовать в двух случаях. Первый — это когда все ваши блоки с информацией одинаковой ширины, в этом случае Вам необходимо использовать данный кусок скрипта:

jQuery(document).ready(function($){ $("#content_masonry").masonry({ singleMode: true }); });

Если у Вас блоки разной ширины, Вам необходимо использовать следующий код:

jQuery(document).ready(function($){ $("#content_masonry").masonry({ columnWidth: 300 }); });

Где сolumnWidth это ширина сетки (в пикселях). Masonry будет следовать этим двум правилам:

Первый элемент общей шириной 190px и margin-right: 0. А второй элемент имеет margin-left: 0, по идее эти два элемента должны прикасаться друг к другу. Но поскольку ColumnWidth имеет значение 200px, то второй элемент начинает отображаться на расстояние 200px.

Данный процесс не будет происходить, если мы не имеем в скрипте значение ColumnWidth и все элементы начинаются друг за другом, поэтому необходимо отделять их при помощи margin.

Теперь немного по кодируем. Для начала подключим необходимые библиотеки jQuery и Masonry в файле header.php. Закиньте данный код в header.php (скачать Вы можете на офф сайте) :

//подключаем jQuery //set the container that Masonry will be inside of in a var var container = document.querySelector("#masonry-loop"); //create empty var msnry var msnry; // initialize Masonry after all images have loaded imagesLoaded(container, function() { msnry = new Masonry(container, { itemSelector: ".masonry-entry" }); }); >