Richten Sie Objekte in zwei Spalten mit verschiedenen Höhen in der Reihenfolge

Question

aus Ich möchte Elemente nacheinander in zwei Spalten (wie Wallapop) ausrichten.

Hier ist es das Beste, was ich erreicht habe (nicht das, was ich will):

Hier wird es einen Code, den ich mit JSfiddle bauen haben, so können Sie es bearbeiten: 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>

Vielen Dank im Voraus!

Answer 1

Hier ist ein Weg, um ein Mauerwerk Stil Layout in reinem CSS zu erhalten:

.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