Can I implement a vertical wrap of elements with CSS?

Question

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

property is a nice idea, but it seems to spread the content to other columns before filling the available height.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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>

Can I implement a vertical wrap of elements with CSS?

Sign up