How can I shift my icon into next row as they're added?

Question

which style or bootstrap or code I should use? when I add one item, it's placed at the end of this row, but I want they shift into next row. I attached 2 pic of my implementation. (if the codes are required I attach them.) pic1

pic2

<div class="layoutpost" >
    {% for post in  posts %}
    <div class="post">
        <div class="img-post">
          <img src="{{post.urls}}" alt="">
        </div>
        <div class="postdescribe">
            <div>{{post.title}}</div>
            <div class="price">price: {{post.price}}</div>
            <div class="more">
            <a href="{% url 'post' post.id %}"> more... </a>
            </div>
        </div>
    </div>
</div>


.layoutpost{
display: flex;
justify-content: space-around;

}
.post{
width: 20%;
border: 0.5px solid;
}
.postdescribe{
margin-left: 10px;
margin-bottom: 10px;
}
.img-post{
width: 100%;
height: 300px;
}
.img-post img {
height: 90%;
width: 100%;
}

Answer 1

You can get the desired output by adding the below code, and instead of using space-between, you can add space-evenly to beautify it.

.layoutpost{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
}