In general, the task is to make a gallery for the portfolio, the blocks are located exactly one under one

enter image description here

but according to the layout it is necessary that they swim under each other like this, tell me, please, how to implement it? in advance

enter image description here

    2 answers 2

    Use column-count , so we will know how many column we have in each screen size and will be able to manage our responsive , column-fill: auto; will give us the height of the div as it is, because, we do not know in advance our height diva. The user can write 1 line or 10 - the answer will find example 1 and example 2 hopefully helped

      Just put the blocks you want in one column.

      If you can not set the height of the elements, it is just for demonstration. An example for a demonstration:

       div { color: white; } .column { float: left; width: 300px; } .one { background-color: orange; height: 100px; } .two { background-color: lime; height: 150px; } .three { background-color: #ccc; height: 150px; } .four { background-color: purple; height: 250px; } 
       <div class="column"> <div class="one"> One </div> <div class="three"> Three </div> </div> <div class="column"> <div class="two"> Two </div> <div class="four"> Four </div> </div>

      • yes, but we can use height: 250px; because we don't know diva's height - David Kern
      • column-count and column-fill is suitable for this task - David Kern
      • one
        @DavidKern If you can not set the height, it is just for demonstration. Concerning column-count agree, but this solution is also suitable. - Vadim Ovchinnikov