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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.