Просмотр поста

.image-list {
      width: 600px;
      margin: 100px 0;
      outline: 1px solid blue;
      float: left;
    }

    /* float clearfix */
    .image-list:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
      }

    .image-list h3 {
      text-align: center;
    }

    .image {
      float: left;
      margin: 0 10px 10px 10px;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
    }

    .image--vertical {
      width: 180px;
      height: 120px;

    }
    .image--horizontal {
      width: 180px;
      height: 250px;
    }

    .image--square {
      width: 180px;
      height: 180px;
    }

<div class="image-list">
    <h3>Изображения 180х120</h3>
    <div class="image image--vertical" style="background-image: url(./images/1.jpg)"></div>
    <div class="image image--vertical" style="background-image: url(./images/2.jpg)"></div>
    <div class="image image--vertical" style="background-image: url(./images/3.jpg)"></div>
    <div class="image image--vertical" style="background-image: url(./images/4.jpg)"></div>
    <div class="image image--vertical" style="background-image: url(./images/5.jpg)"></div>
    <div class="image image--vertical" style="background-image: url(./images/6.jpg)"></div>
  </div>

  <div class="image-list">
    <h3>Изображения 180х250</h3>
    <div class="image image--horizontal" style="background-image: url(./images/1.jpg)"></div>
    <div class="image image--horizontal" style="background-image: url(./images/2.jpg)"></div>
    <div class="image image--horizontal" style="background-image: url(./images/3.jpg)"></div>
    <div class="image image--horizontal" style="background-image: url(./images/4.jpg)"></div>
    <div class="image image--horizontal" style="background-image: url(./images/5.jpg)"></div>
    <div class="image image--horizontal" style="background-image: url(./images/6.jpg)"></div>
  </div>

  <div class="image-list">
    <h3>Изображения 180х180</h3>
    <div class="image image--square" style="background-image: url(./images/1.jpg)"></div>
    <div class="image image--square" style="background-image: url(./images/2.jpg)"></div>
    <div class="image image--square" style="background-image: url(./images/3.jpg)"></div>
    <div class="image image--square" style="background-image: url(./images/4.jpg)"></div>
    <div class="image image--square" style="background-image: url(./images/5.jpg)"></div>
    <div class="image image--square" style="background-image: url(./images/6.jpg)"></div>
  </div>