CODEWITHSUNDEEP
htmlcss
G_test_00
G_test_00

Reputation: 31

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

How to positioning the elements one under the other, regardless of the height of the item? As having the following markup, to place the elements in the 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>

Upvotes: 0

Views: 47

Answers (1)

Enmanuel Duran
Enmanuel Duran

Reputation: 5118

There are a couple of ways of doing this.

  1. Emulate this effect by using the css column property, I found this fiddle for example, you can see how the elements are positioned.

  2. Other way (most viable I think) is to use a plugin like masonry as @kukkuz said before, it does almost everything you need.

  3. Create your own grid using javascript and css in order to position every element based on other element's positions (which I wouldn't recommend) because you have to do some calcs and it could take some time.

Upvotes: 1

Related Questions