Wrap items to the next column when height is overflowing?



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

and not like

1 2 
3 4 

Here is a photo for a reference:
enter image description here

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


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>

Answered By – Yoav Kadosh

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More