0

I would like to align items one after the other in two columns (like wallapop).

Here it's the best I have achieved (not what I want):

example by image

Here it's a code I've build with JSfiddle so you can edit it: https://jsfiddle.net/52qdnLcg/

.parent {
  background-color: #ccc;
}
.child {
  width: 44%;
  background-color: #3c434f;
  margin: 2%;
  display: inline-block;
  text-align: center;
  color: #fff;
}
<div class="parent">
  <div class="child" style="height: 150px;">
    1
  </div>
  <div class="child" style="height: 60px;">
    2
  </div>
  <div class="child" style="height: 40px;">
    3
  </div>
  <div class="child" style="height: 70px;">
    4
  </div>
  <div class="child" style="height: 30px;">
    5
  </div>
</div>

Thanks in advance!

Dani G.
  • 577
  • 8
  • 21

1 Answers1

0

Here's a way to get a masonry style layout in pure CSS : 

.parent {
  background-color: #ccc0;
  column-count: 2;
  column-gap: 1em;
}

.child {
  width: 100%;
  background-color: #3c434f;
  margin: 2%;
  display: inline-block;
  text-align: center;
  color: #fff;
}

Fiddle

Vincent G
  • 8,547
  • 1
  • 18
  • 36
  • Hi Vincent thanks, but It's not what I exactly wanted. It's the same but the ordered I want it's 1st left, 2nd right, 3rd right, 4th right, 5th left, ... So it's in ascending order from top to bottom. Hope that it's possible! :D – Dani G. Apr 22 '16 at 12:37