There are several div blocks:

<div id="wrapper"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

How to impose blocks so that they stand up this way:

enter image description here

Blocks can be arbitrary height, depending on the content. If we apply the float: left property to the blocks, the lower blocks are aligned with the lower boundary of the highest block in the first row.

2 answers 2

Option 1:

 .flexboxes { display: flex; flex-wrap: wrap; height:200px; flex-direction: column; } .flexboxes > div {width:200px;background-color:red;margin:3px;} .block0 {height: 60px;} .block1 {height: 80px;} .block2 {height: 70px;} .block3 {height: 90px;} .block4 {height: 80px;} .block5 {height: 100px;} 
 <div class="flexboxes"> <div class="block0"></div> <div class="block1"></div> <div class="block2"></div> <div class="block3"></div> <div class="block4"></div> <div class="block5"></div> </div>

Option 2 (using scripts):

 $(function() { $('.flexboxes').masonry({ itemSelector: 'div' // обращаемся к пунктам }); }); 
 .flexboxes { display: flex; flex-wrap: wrap; height:200px; width: 630px; } .flexboxes > div {width:200px;background-color:red;margin:3px;} .block0 {height: 60px;} .block1 {height: 80px;} .block2 {height: 70px;} .block3 {height: 90px;} .block4 {height: 80px;} .block5 {height: 100px;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://masonry.desandro.com/masonry.pkgd.js"></script> <div class="flexboxes"> <div class="block0"></div> <div class="block2"></div> <div class="block4"></div> <div class="block1"></div> <div class="block3"></div> <div class="block5"></div> </div>

  • I use the second option. For some reason, it refuses to work correctly if the element (3n-1) is set to the margin: 0 15px 20px 15px. - Frontender
  • Also, if all the blocks are set to the width, for example 310px, and the blocks (3n-1) are 330px, it also does not work. But the new line is transferred to the third block. - Frontender
  • Too shy to ask, what is the width (3n-1) - 330px ? - Yuri
  • The central blocks .flexboxes> div: nth-child: (3n-1) {margin: 0 15px 20px 0;}. Just the width of the container - 960px. The block width is 310px. And the central blocks should be indented from the extreme 15px left and right. - Frontender
  • @ViktorPavlov, you need to play with styles. I do not know the whole picture, by this I can not judge - Yuri

Columns?

 .column { display: inline-block; width: 33%; margin-right: .3333%; }

https://jsfiddle.net/psmhwqq7/

  • There are no problems in the columns. Layout is adaptive, and with lower resolution, the third block moves to the second row, and the last two - to the third. Therefore, the columns are not suitable. - Frontender