Masonry — блоки в виде кирпичной кладки на чистом css

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

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

Автор:

Понравилась статья? Поделись с друзьями!

И подпишись на обновления блога!

Комментарии: 2

  • Арина Аранцева29.12.2015 в 13:22
    Очень полезная статья! Достаточно информативная, благодаря ей я узнала как делать все в кирпичной кладке. Это все смотрится достаточно симпатично, без больших отступов. Спасибо за статью!
    • Андрей29.12.2015 в 14:26
      Пожалуйста! Подписывайтесь на обновления блога! И следите за выходом новых статей!
Оставить комментарий
Не забудьте прочитать правила комментирования