Gallery

gallery.html

<div class="container two">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>
<br />
<div class="container three">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>

gallery.less

.container {
  height: 496px;
  width: 628px;
  padding: 10px;
  background-color: gray;
  
  .child {
    display: inline-block;
    float: left;
  }
  .child:nth-child(1) {
    background-color: red;
  }
  .child:nth-child(2) {
    background-color: green;
  }
  .child:nth-child(3) {
    background-color: blue;
  }
  .child:nth-child(4) {
    background-color: white;
  }
  
  &.two {
    .child:nth-child(1) {
      width: 376px;
      height: 496px;
      margin-right: 8px;
    }
    .child:nth-child(2), .child:nth-child(3) {
      width: 244px;
      height: 244px;
      margin-bottom: 8px;
    }
    .child:nth-child(3) {
      margin-bottom: 0px;
    }
    .child:nth-child(4) {
      display: none;
    }
  }
  
  &.three {
    .child:nth-child(1) {
      width: 460px;
      height: 496px;
      margin-right: 8px;
    }
    .child:nth-child(2), .child:nth-child(3), .child:nth-child(4) {
      width: 160px;
      height: 160px;
      margin-bottom: 8px;
    }
    .child:nth-child(4) {
      margin-bottom: 0px;
    }
  }
}