Need to make a similar arrangement of cards in the gallery

The problem with alignment is when I make a new row (2), the blocks are aligned along the line, but it is necessary that under each separate block. How to do it?

    1 answer 1

    Set the container with the display: flex property flex-flow: column wrap — in this way, the children will be located along the Y axis, not X, and will be transferred. Also add a height limit to it. Pay attention to the order of the blocks.

     .container { display: flex; flex-flow: column wrap; max-height: 700px; } .block { width: 180px; margin: .5em; border: 1px solid; } .block--1 { height: 100px; } .block--2 { height: 150px; } .block--3 { height: 170px; } .block--4 { height: 120px; } .block--5 { height: 190px; } 
     <div class=container> <div class="block block--2">1</div> <div class="block block--1">2</div> <div class="block block--4">3</div> <div class="block block--3">4</div> <div class="block block--5">5</div> <div class="block block--1">6</div> <div class="block block--4">7</div> <div class="block block--3">8</div> <div class="block block--2">9</div> <div class="block block--5">10</div> <div class="block block--1">11</div> </div>