As with the following markup, place the elements as follows: enter image description here

.photo { display: inline-block; vertical-align: top; max-width: 160px; width: 100%; margin: 0px 20px 20px 0; background:red; } 
 <div class="photo"> <div class="photo__item photo__item_1"></div> </div> <div class="photo"> <div class="photo__item photo__item_2"></div> </div> <div class="photo"> <div class="photo__item photo__item_3"></div> </div> <div class="photo"> <div class="photo__item photo__item_4"></div> </div> <div class="photo"> <div class="photo__item photo__item_5"></div> </div> <div class="photo"> <div class="photo__item photo__item_6"></div> </div>

    1 answer 1

    In this case, in my opinion, it is easier to arrange all the pictures in independent columns, that is,

     <div class="photo_column"> <div class="photo__item"></div> <div class="photo__item"></div> <div class="photo__item"></div> <div class="photo__item"></div> </div> <div class="photo_column"> <div class="photo__item"></div> <div class="photo__item"></div> <div class="photo__item"></div> <div class="photo__item"></div> </div> // и тд...

    Especially good in this example would be the CSS framework Bootstrap , and I also offer a look at the interesting Masonry plugin.