Как сверстать этот блок?

Question

[Mansur05]

Как сверстать такой блок?

Каждое фото это div, определенных размеров и backgound'ом, а внутри текст с белым фоном
Пример:

<div class="banner banner-1">
 <div class="banner-text">
  <p>hot deal<br><span>for men</span></p>
 </div>
</div>

Стили:

.banner-1 {
  width: 560px;
  height: 542px;

  background: no-repeat url("../img/category/banner_1.png");

  margin-right: 20px;
  margin-bottom: 20px;
}

Вопрос в том как заставить их лежать в таком стиле, как тетрис.

Comments

[FeST1VaL]

ну вот как раз лежать их так не проблема заставить) просто 2 блока в которых друг под другом картинки) вопрос в другом будет ли меняться размеры картинок)

[Одиночка Айс]

Артем Будин, ты что? Нет, конечно! Это же утвержденный дизайн! Верстаем и не вые возникаем!

Answer 1

[Henry Chinasky]

если не хочешь учить css, то это то что тебе подойдет: Masonry

Answer 2

[Ankhena]

https://jsfiddle.net/f3h0y46m/

.wrapper {
  columns: 2 auto;
  column-gap: 20px;
}
.item {
  display: inline-block;
  background: #eee;
  margin-bottom: 20px;
}

Answer 3

[Антон Усачев]

Можно на гридах. Один из вариантов:



Можно вот так, если количество блоков заранее неизвестно:

Answer 4

[Алексей]

Общий враппер для колонок - два враппера самих колонок - внутри уже эти блоки. Для общего враппера задать свойство dsiplay flex

Answer 5

[Одиночка Айс]

1. br вам не нужны, от слова совсем
2. Картинки это контент, поэтому выводим через тег img