Masonry сетка на CSS

Данный вариант сетки осуществляется всего одним css-свойством column-count

Плюс данного варианта в том, что проще не придумать. А минус, что сетка строится сверху вниз, а не слева направо и во многих случаях может отображаться неровно.

Пример:

Блок 1

Информация в блоке

Информация в блоке

Информация в блоке

Блок 2
Блок 3

HTML:

CSS:

И далее остается настроить по вкусу адаптивность, например так:

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

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

  • Ярик:

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

    Ответить
    • Alexander:

      Спасибо за Ваш отзыв 🙂
      Чужие коды тоже правда использую, но по возможности стараюсь просмотреть и подправить на свой лад их.

      Ответить