I am implementing a drag-and-drop system to transfer elements to a container div. I would like these transferred elements to stay in a single column until they hit the container's height, then "wrap" to the next column, and so on.
Unfortunately the item count will not be pre-determined. Effectively I would like to end up with something that wraps elements into this kind of layout:
...with the elements loaded into the container in the order in which you see them here.
The
column-count
You can do it using flex-box
.container {
width:200px;
height:300px;
display:flex;
flex-direction:column;
flex-wrap: wrap;
}
.container div {
text-align:center;
width:50px;
height:50px;
background:red;
color:white;
margin:10px;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>