Пример:
Блок 1
Информация в блоке
Информация в блоке
Информация в блоке
Блок 2
Блок 3
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="masonry-grid"> <div class="col-block"> <h6>Блок 1</h6> <p>Информация в блоке</p> <p>Информация в блоке</p> <p>Информация в блоке</p> </div> <div class="col-block"> <h6>Блок 2</h6> </div> <div class="col-block"> <h6>Блок 3</h6> </div> <img src="photo.jpg" alt=""> <img src="photo.jpg" alt=""> <img src="photo.jpg" alt=""> <img src="photo.jpg" alt=""> <img src="photo.jpg" alt=""> <img src="photo.jpg" alt=""> <img src="photo.jpg" alt=""> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.masonry-grid { margin:auto; column-count:3; } .masonry-grid img, .masonry-grid .col-block { max-width: 100%; margin-bottom: 16px; border: 6px solid #BFE2FF; box-sizing: border-box; box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2); transition: all 0.3s linear; } .masonry-grid img:hover, .masonry-grid .col-block:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .col-block { padding: 2px 20px; } |
И далее остается настроить по вкусу адаптивность, например так:
|
1 2 3 4 5 6 7 8 9 10 |
@media (max-width:700px) { .masonry-grid { column-count:2; } } @media (max-width:500px) { .masonry-grid { column-count:1; } } |
Весчь!!!!
Спасибо вам за качественный контент. Сейчас вопрос стоит не только об этой статье. На вашем сайте все ваши наработки гениальные и простые подается доступно. И главное не копипаст с других ресурсов. Все нужное, свежее и не заезженное. Просто огонь!... Сорри за излишнюю экспрессию.
Спасибо за Ваш отзыв 🙂
Чужие коды тоже правда использую, но по возможности стараюсь просмотреть и подправить на свой лад их.