Wrap items to the next column when height is overflowing?

Issue

I have a container with items inside it.

This container has a height set. I'd like to wrap the items inside this container to a new column by maintaining the order of them to the next column. How do I do this?

For example, if I have 5 items, I'd like to wrap them like this:

1 4
2 5
3

and not like

1 2 
3 4 
5

Here is a photo for a reference:

From this photo, I'd like to create a new column with the 11th and 12th item

Solution

You can use flexbox with flex-direction: column:

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 20rem;
  width: 20rem;
  border: 1px solid black;
  padding: 5px;
  gap: 5px;
}

.item {
  font-size: 5rem;
  border: 1px solid black;
  text-align: center;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Answered By - Yoav Kadosh