Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Адаптивные html-блоки в виде кирпичной кладки с помощью CSS3

Наверняка все уже успели привыкнуть к такому тренду в веб-дизайне как Masonry (в переводе с анг. это кирпичная кладка), по другому его ещё называют плиточный дизайн, интересный способ вывода контента, позволяющий рационально использовать всё имеющееся пространство сайта. Самым известным примером использования плиточного дизайна, является, наверное, Googl+. Ну, а законодателями и зачинателями сего действа стали «мягкотелые», когда выпустили в свет Windows8, где как раз и были впервые использованы плитки с логотипами приложений и кратким содержанием. Конечно такая метода применялась и раньше, но всё больше в виде экспериментов разработчиков-энтузиастов.
Существуют различные способы реализации компактных html-блоков с содержанием в виде кирпичной кладки, самый распространенный, это использование специализированных плагинов jQuery, например скрипт David’a DeSandro, который так и называется Masonry (кирпичная кладка). Развернутый мануал по установе, настройке и работе скрипта написал в своё время Kama, кому интересно можете изучить подробно.
Мы же сегодня, рассмотрим не менее интересный, а намой, конечно же очень субъективный взгляд, самый интересный способ вывода контента в форме кирпичной кладки, исключительно средствами CSS, без подключения к работе дополнительных javascript плагинов и громоздких библиотек.

Для начала смотрим пример, а потом, подробнейшим образом разберём, что, куда и зачем:

Адаптивные html-блоки в виде кирпичной кладки

Как видите, в таких компактных блоках, вы сможете размещать всё что угодно, любой контент, изображения, встроенное через iframe видео с любых видео-хостингов, текстовое содержание, ссылки, различные виджеты, описание ценники товаров, и т.д. К тому же вам не придется заботиться о размерах картинок или видеоплеера с YouTube, например, все размеры заданы в css, благодаря чему, медийный контент, автоматом подстроится под родительский контейнер, роль которых выполняют привычные div-ы с классом item.

HTML структура

<!-- Контейнер с адаптиными блоками -->
<div class="masonry">
    <!-- Адаптивные блоки с содержанием -->
   <div class="item">
       <img src="http://placehold.it/350x200">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
   <div class="item">
       <img src="http://placehold.it/250x250">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
   <div class="item">
       <img src="http://placehold.it/470x320">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
   <div class="item">
       <img src="http://placehold.it/250x150">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
   <div class="item">
       <img src="http://placehold.it/300x250">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
   <div class="item">
       <img src="http://placehold.it/450x300">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
    <div class="item">
       <img src="http://placehold.it/250x200">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
   <div class="item">
       <img src="http://placehold.it/250x150">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
    <div class="item">
       <img src="http://placehold.it/250x150">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
    <div class="item">
       <img src="http://placehold.it/280x190">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
    <div class="item">
       <img src="http://placehold.it/500x400">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
    <!-- Конец адаптивных блоков с содержанием -->
 
</div>
    <!-- Конец контейнера с адаптивными блоками -->

Контейнеры, в которых размещается необходимый контент, оформлены с помощью свойств в виде прямоугольных плиток, с лёгкой наружной тенью box-shadow и изменениями алгоритма расчета ширины и высоты элемента box-sizing, с присвоенным значением border-box.

Для формирования внешнего вида блоков и построения их в нужный нам макет в форме отдельных плиток, используется минимум кода css, ничего лишнего. Краткие комментарии к свойствам, которые я прописал непосредственно в исходниках, помогут вам быстрее разобраться и, пи желании подстроить блоки под свой изысканный вкус))).

CSS Стили

/* ------------- Контейнер с адаптивными блоками------------- */
.masonry {
    margin: 1.5em 0;
    padding: 0;
    column-gap: 1.5em; /* Общее расстояние между колонками */
    font-size: .85em;
    -moz-column-gap: 1.5em; /* Расстояние между колонками для Firefox */
    -webkit-column-gap: 1.5em; /* Расстояние между колонками  для Safari, Chrome и iOS */
}
 
/* Элементы в виде плиток с содержанием */
.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box; /* Изменения алгоритма расчета ширины и высоты элемента.*/
    -moz-box-sizing: border-box; /* Для Firefox */ 
    -webkit-box-sizing: border-box; /* Для Safari, Chrome, iOS иAndroid */ 
    box-shadow: 2px 2px 4px 0 #ccc; /* Внешняя тень плиток */
}
 
/* Стили картинок, видое и фреймов внутри адаптивных плиток */
img, iframe {
max-width: 100%;
height: auto;
display: block;
}
 
/* Стили ссылок внутри плиток */
.item a {
text-decoration: none;
color: #359CC6;
margin: 0 10px;
}
 
/* Стили ссылок при наведении */
.item a:hover {
color: #E88F00;    
border-bottom: 1px dotted #9F1D35;
}
 
/* Медиа-запросы для различных размеров адаптивного макета */
@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;
    }
}
 
@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}

В демонстрационном примере я поместил контейнер div class="masonry с адаптивными блоками на борту, внутри общего, родительского контейнера div class="wrapper", который обычно используется на сайтах для размещения контента страниц. Если вы решите применить эти адаптивные блоки не в виде отдельной страницы, а например в основной колонке, на главной странице, или для вывода кратких анонсов статей, описания разделов сайта, вам достаточно использовать div class="masonry" со встроенными в него отдельными блоками div class="item". Блоку отлично, на полном автомате, подстроятся под размер родительского контейнера.
Адаптивность всей конструкции достигается посредством специальных меда-запросов @media для различных типов носителей, то-бишь размеров их экранов. В процессе уменьшения или увеличения размера экрана, позиция плиток и их размер будут изменяться, в зависимости от устройства, на котором осуществляется просмотр. Так например, при просмотре на устройствах с размером экрана в 400px, плитки выстроятся в две колонки, а на мониторах больше 1100px, блоки выведутся уже в пять колонок. Процентное значение ширины width: 100%; плиток, позволяет осуществить плавный переход и изменение размера, в зависимости от типов пользовательских устройств.

Где применять такой способ вывода информации? Да где угодно. У вас на блоге или сайте, есть рубрики(категории), заделайте представительную картинку, соответствующую тематике категории, добавьте небольшое описание, приправьте всё это ссылочкой на страницу этой самой рубрики, и разместите всё это дело на главной странице. Или же, организуйте вывод новостей, кратких анонсов самых свежих записей блога, описание товаров в интернет магазинах и т.д. и т.п. Вариантов использования данного метода масса. Вот только как-то у самого ещё руки не дошли, реорганизовать структуру своего блога. Надеюсь, те кому приглянулся этот способ, будут порасторопнее меня и используют адаптивные боки в виде плиток на своих новых и уже работающих интернет-проектах.

Обкатать метод, поэкспериментировать с параметрами, вы можете непосредственно в редакторе кода онлайн: Тынц >>. Все исходники, как на ладони, доступны к прямой правке, и в живую, сразу виден результат.

С уважением, Андрей.

Удачи! Буду очень благодарен, если поделитесь ссылкой на запись в своих соц. сетях:

Всего комментариев: 56

  • Полина: 25 августа, 2014 в 15:18

    Редко, что получается из того, что Вы пишете, потому как голова видно не под то заточена(,пытаюсь что-то сотворить уже третий год.Сайт слетает постоянно.Читаю Вас всегда с огромным интересом, и буду читать, и пробовать воплотить. Спасибо.

    Ответить
    • driver: 25 августа, 2014 в 18:36

      Здравствуйте Полина.
      Спасибо за отзыв. Еси что-то не получается, порой достаточно маленькой подсказки, так что пишите, чем смогу помогу.

      Ответить
  • Юля: 12 сентября, 2014 в 01:32

    я страдаю……такой эффект классный а у меня не получается…если честно я сижу с этим уже несколько дней…этот эффект хочу применить к определенной категории…создала для него шаблон и начала работу…все перелопатила, подключить плагин квери не получается мозгов пока наверное не хватает…ваш урок боле менее помог и то мне пришлось display: inline-block; заменить на display: inline-table; что бы посты (блоки) боле менее выровнялись…но посты не выводятся так как в уроке, они не оптекают другие блоки ( ширина стоит у всех блоков одинаковая), с новой строки они располагаются под самой длинной верхней, оставляя пустые места под короткими верхними блоками… помогите а то я сойду с ума (((((

    Ответить
    • driver: 12 сентября, 2014 в 22:50

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

      Ответить
  • Григорий: 18 октября, 2014 в 18:10

    Здравствуйте, блок masonry задает height таким образом что блок пагинации который идет после него оказывается на мол метра ниже блока с постами, и это пространство пустое. Как это исправить? сделать так чтоб блок masonry заканчивался там где заканчивается последний блок с постом?
    С Уважением

    Ответить
  • Игорь: 28 ноября, 2014 в 17:05

    Можно ли сделать так чтобы блоки в соответсвии с порядком который задан в html выстраивались не сверху-вниз-справа-налево, а справа-налево-сверху-вниз? Чтобы div который идет вторым в списке был не под первым div, а справа от него.

    Ответить
    • driver: 28 ноября, 2014 в 18:18

      Здравствуйте, Игорь. В конкретном случае нельзя, для разбиения содержимого основного блока на колонки, использовал свойство column-count, соответственно всё содержимое(в нашем случае это плитки) разбиваются на колонки последовательно, как если бы это был просто текст

      Ответить
      • Миша: 3 марта, 2015 в 00:24

        А что нужно сделать, что бы блоки шли с лева на право, сверху в низ?

        Ответить
  • NeedHate: 19 декабря, 2014 в 12:40

    codepen.io/NeedHate/pen/LEZeoZ
    Почему Chrome (соответственно и Opera)так реагирует на image hover ? (картинки внутри itm должны смещаться на 2 градуса).

    Ответить
    • driver: 19 декабря, 2014 в 14:08

      Здравствуйте.
      Посмотрел, картинки поворачиваются при на ведении на указанный градус, не совсем понял, что вы хотели, transform: rotate(2deg) срабатывает как и положено

      Ответить
      • NeedHate: 19 декабря, 2014 в 14:57

        О, я уже нашел решение… там был баг если у img не поставить параметр -webkit-backface-visibility: hidden то при наведении на следующих столбцах «кладки» картинки исчезают. Я просто в примере поправил уже. Сейчас сохранил с багом, чтобы было понятно о чем я.

        Ответить
  • Max_Cohen: 6 февраля, 2015 в 10:34

    Привет,
    отличная статья. То, что Я искал с вчерашнего дня. Теперь попробую поставить. Кстати, вопрос — как насчет поддержки браузерами?
    Спасибо.

    Ответить
    • driver: 6 февраля, 2015 в 18:34

      Здравствуйте.
      IE начиная с 10-й версии, остальные браузеры в порядке.

      Ответить
      • Александра: 4 июня, 2015 в 14:16

        Огромное спасибо за статью, ломала голову, как это сделать, ибо знаний еще глубоких нет. С Вашей помощью все заработало, чуток подправила код под свои нужды 🙂
        Тестировала на разных браузерах — наткнулась на IE версии ниже 10. Естественно, не отображается так, как нужно.
        Не в курсе, как это можно исправить?

        Ответить
  • Ann: 16 апреля, 2015 в 05:43

    Большое спасибо за интересную статью. А можно каким-то образом это вставить в шаблон wordpress, чтобы такая плитка отображалась на главной странице? Или там надо на PHP писать код? Заранее спасибо за ответ.
    Извините, я не большой специалист по wordpress, просто если бы это был обычный сайт на php, то я бы нашла, наверное, куда воткнуть данный код, но, поскольку это CMS, то я просто ума не приложу как быть. Уже всю голову сломала.

    Ответить
  • suckittender: 27 апреля, 2015 в 09:30

    Спасибо за интересное решение.
    Возникает странная проблема. Все сделал по инструкции, ничего не менял в коде. В Firefox все так, как и написано: на полном экране 5 столбцов. Но в браузерах Chrome, Opera, Yandex почему-то только 4 столбца показывается, на месте пятого приличное голое пространство. Хотя разрешение 1280*1024.

    Ответить
    • driver: 27 апреля, 2015 в 11:40

      Здравствуйте.
      Вот именно сейчас проверяю работу плиток в эмуляторе мобильных устройств, при изменении размеров багов не заметил, в том числе и на разрешении 1280*1024.
      В медиа-запросах для базового контейнера .wrapper я использовал min-width: 1280px, а для блока с плитками .masonry, на максималке, учитывая отступы min-width: 1100px, копните в эту сторону, но по крайней мере у меня, переход плиток происходит корректно во всех браузерах.

      Ответить
  • suckittender: 27 апреля, 2015 в 19:57

    Убил кучу времени, но похоже проблема была в том, что у меня не так много контента было. И фаерфокс почему-то нормально эту плитку клал, а вебкитовские оригинальным способом, игнорируя 5 столбик. Как только добавил еще несколько блоков контента — все стало идеально показываться.

    Ответить
  • Анна: 2 июня, 2015 в 14:57

    Спасибо за статью! Просто супер! :3

    Ответить
  • Андрей: 17 июля, 2015 в 15:28

    Именно то, что искал! Спасибо Вам большое!

    Ответить
  • Ivan: 14 сентября, 2015 в 13:47

    Добрый день. А как сделать данные блоки по центру странички? Например на большом экране у меня открывается все нормально. Пять столбиков на строку. На меньшем экране плитка сдвигается (например в строке становится четыре плитки) или на мобильном в строке получается две плитки. Но весь блок сдвигается влево и справа получается пустое место. Выглядит не очень красиво. Пробовал добавить div align=”ctnter”, но ничего не получается. Как это можно решить?

    Ответить
    • driver: 14 сентября, 2015 в 20:02

      В демо всё по центру, при изменении до любого размера экрана. Выравнивание по левому краю происходит при недостаточном количестве блоков(плиток) с контентом

      Ответить
  • Илья: 18 сентября, 2015 в 02:13

    Доброго времени! Подскажите, как следует изменить код, чтобы при добавлении блоки распологались по горизонтали, а не по вертикали как сейчас.
    Т.е. сейчас при последовательном расположении блоков порядок такой:
    1 4 7
    2 5 8
    3 6 9
    А хотелось бы так:
    1 2 3
    4 5 6
    7 8 9
    Буду премного благодарен за совет.
    Спасибо

    Ответить
    • NeedHate: 18 сентября, 2015 в 23:46

      Никак… *)

      Ответить
      • Илья: 21 сентября, 2015 в 03:30

        Вот это поворот! хм… Совсем никак? нужно искать другое решение значит?

        Ответить
    • just: 19 июля, 2017 в 08:38

      transform rotate us-ai xD
      ne, nu a 40, rehenie ))))

      Ответить
  • Ник: 28 июля, 2016 в 00:46

    Как реализовано многоточие/бтн. подробнее в конце обрывающегося многострочного текстового блока?

    Ответить
    • driver: 28 июля, 2016 в 22:25

      Никак не реализовано, тупо руками прописано… )))

      Ответить
  • Дмитрий: 25 сентября, 2016 в 16:17

    Скопировал себе для проверки, ничего не работает!

    Ответить
    • driver: 25 сентября, 2016 в 19:21

      Что скопировал? Себе — это куда? Вы стили подключили? Или тупо, фарш демо-страницы скопировали? В демо работает, в песочнице тоже всё пучком. Да и вообще, зачем что-то копировать, если можно скачать исходники и измываться над ними сколько душе угодно

      Ответить
  • Oleg: 26 октября, 2016 в 22:35

    Все отлично работает, но возникает одна проблема: в DLE после коротких новостей, пагинация строится тоже кладкой. Как можно очистить поток, чтобы пагинация выводилась как положено?

    Ответить
  • just: 19 июля, 2017 в 08:39

    super puper. avtoru sps.

    Ответить
  • Инесса: 8 ноября, 2017 в 11:08

    Большое спасибо! Очень пригодилось!

    Ответить
  • Владимир: 14 декабря, 2017 в 16:04

    Очерь круто, но у меня почему-то колонки обрезают блоки…

    Ответить
  • Елена: 19 декабря, 2017 в 11:58

    А у меня все получилось — автору спасибо за заготовку — все можно изменять под нужный дизайн сайта! Давно искала подобное ☺♥☺♥

    Ответить
  • Igor: 20 апреля, 2018 в 15:40

    Добрый день, подскажите пожалуйста есть ли возможность пофиксить один баг связаний с этой сеткой. Я использую такую же сетку но только на две колонки(column-count: 2;) и так до 480 пикселей в ширину, далее одну колонку, в каждом таком итеме у меня єсть бутстраповскоє модальное окно и кнопочка для его вызова, в хроме мозилле это нормально работает, но в едже это так печально что просто беда prntscr.com/j7sh1c

    Ответить
  • Игорь: 13 ноября, 2018 в 13:02

    В Хроме не работает с 4 колонками, почему так?

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>