This question has already been answered:

Arranged the blocks in two columns, but the last one if the last block in the current column does not fit, then it is partially transferred to the new one, how to make the blocks transferred completely, not cut into 2 columns? enter image description here

Reported as a duplicate by Regent , Yuri , Denis Bubnov , ߊߚߤߘ , Community Spirit ♦ 11 Feb '17 at 18:28 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • five
    You need to bring the code in the question text, and use screenshots only as a supplement - Crantisz

1 answer 1

This can be done using flexbox :

 .column { display: inline-flex; width: auto; height: 200px; flex-direction: column; flex-wrap: wrap; } .column-block { width: 100px; height: 48px; background-color: red; border: 1px solid blue; } 
 <div class="column"> <div class="column-block">Блок 1</div> <div class="column-block">Блок 2</div> <div class="column-block">Блок 3</div> <div class="column-block">Блок 4</div> <div class="column-block">Блок 5</div> <div class="column-block">Блок 6</div> <div class="column-block">Блок 7</div> </div>

  • not ashamed to copy someone else's answers? - Vadizar
  • one
    @Vadizar, um ... and whose answer did I copy? - Yuri
  • instead of marking the message as a duplicate, you transfer the answers to this question. stackoverflow.com/questions/619955/… - Vadizar
  • 3
    @Vadizar, 1) I never read your answers. 2) I have nothing to do and for each question to find a duplicate and copy the answers? - Yuri
  • one
    @Vadizar, this method is so rare that no one really knows about such a transfer - Yuri