Помогите сверстать плитку из картинок разной ширины?

[uppercase_css]

Посоветуйте как сделать плитку из картинок разной ширины?

Схема как во вложении.

Как сделать чтобы картинки сами укладывались?

Пробовал делать через display inline-block, float left , но первая и вторая картинки встают на место , а картинка под номером 3 горизонтальная картинка уходит ниже второй картинки.

Горизонтальные картинки одинаковые между собой и вертикальные картинки одинаковые между собой.

Картинок много.

Как на картинке сначала идут слева 2 горизонтальные картинки  и 1 вертикальная картинка справа.

Следующий ряд слева  1 вертикальная картинка и справа 2 горизонтальные картинки .

А дальше все чередуется точно также.

[AlexZaw]

 можно вот так

<div class="wrap">
<div class="bl1">1</div>
<div class="bl3">3</div>
</div>
<div class="bl2">2</div>

.bl1, .bl3{width: 300px;height: 100px;background-color: #f00;}
.bl2{width: 100px;height: 200px;background-color: #ff0;}
.wrap{float:left;} 
.bl2{display:inline-block}

 

Edited October 12, 2017 by AlexZaw

[Tilonorrinco]

http://jsbin.com/wuresob/edit?output

(кликните по кнопке run with js, чтобы динамически изменять количество картинок)

Edited October 13, 2017 by Tilonorrinco

[uppercase_css]

круто! спасибо!