html - How to positioning the elements one under the other, regardless of the height of the item? -

-

how positioning elements 1 under other, regardless of height of item? having following markup, place elements in following way:

elemnts 

.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>

there couple of ways of doing this.

  1. emulate effect using css column property, found this fiddle example, can see how elements positioned.

  2. other way (most viable think) use plugin masonry @kukkuz said before, need.

  3. create own grid using javascript , css in order position every element based on other element's positions (which wouldn't recommend) because have calcs , take time.


Comments

Post a Comment