There is such a layout

<div class="box"> <div class="box-item"> <div class="box-item__head"> <h2>#1</h2> </div> <div class="box-item__content"> <ul class="box-list"> <li class="box-list__item">Заказ 1</li> <li class="box-list__item">Заказ 2</li> <li class="box-list__item">Заказ 3</li> <li class="box-list__item">Заказ 4</li> <li class="box-list__item">Заказ 5</li> </ul> </div> </div> </div>

box-item blocks can be very many with different nesting, and such styles

 .box { height: 100%; padding: 10px; column-fill: auto; column-width: 100px; column-gap: 10px; .box-item { width: 100%; border: 3px solid black; margin: 0 0 10px; border-radius: 10px; &__head { background-color: #000; height: 40px; padding: 0 20px; h2 { margin: 0; color: #fff; } } } }

due to this, the blocks are transferred to the new column. It is necessary to add a dashed line to the blocks that are transferred to the new column, here is an example link

How to find the coordinates of a discontinuous block or even how to solve such a problem. thank

  • Pure CSS won't work, in any case you will have to use JS. I had a similar task on the project and we struggled to unscrew without scripts, but in any way. Algorithm: render -> determine a block whose bottom goes beyond the boundaries -> assign styles to this block with a lower bound and the next block with an upper bound -> render - Alexandr Tovmach

0