Can anyone suggest a style, bootstrap, or code solution for my issue? Currently, when I add an item, it is placed at the end of the row, but I want them to shift to the next row. Below are two images showing my current implementation: pic1
<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%;
}