I'm trying to design an element where there are multiple cards in a flexbox and after every fourth card I need to break the row such that the next four cards share another row just below the first row and this will go on for every fourth card inside the element container. I partially achieved it but now all the cards are coming inside a single card and again next set of cards are coming inside a single card in the same row instead of changing column and forming next row. Have a look at the image below to get a clearer view of what I'm trying to achieve here.
<div class="content__card">
<div class="card">
<img
src="#"
alt="Person" class="card__image">
<p class="card__name">Lily-Grace Colley</p>
<div class="grid-container">
<div class="grid-child-posts">
156 Post
</div>
<div class="grid-child-followers">
1012 Likes
</div>
</div>
<ul class="social-icons">
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-codepen"></i></a></li>
</ul>
<button class="btn draw-border">Follow</button>
<button class="btn draw-border">Message</button>
</div>
<p class="breaker"></p>
<div class="card">
<img
src="#"
alt="Person" class="card__image">
<p class="card__name">Lily-Grace Colley</p>
<div class="grid-container">
<div class="grid-child-posts">
156 Post
</div>
<div class="grid-child-followers">
1012 Likes
</div>
</div>
<ul class="social-icons">
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-codepen"></i></a></li>
</ul>
<button class="btn draw-border">Follow</button>
<button class="btn draw-border">Message</button>
</div>
<p class="breaker"></p>
<div class="card">
<img
src="#"
alt="Person" class="card__image">
<p class="card__name">Lily-Grace Colley</p>
<div class="grid-container">
<div class="grid-child-posts">
156 Post
</div>
<div class="grid-child-followers">
1012 Likes
</div>
</div>
<ul class="social-icons">
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-codepen"></i></a></li>
</ul>
<button class="btn draw-border">Follow</button>
<button class="btn draw-border">Message</button>
</div>
<p class="breaker"></p>
</div>
CSS
.content__card {
display: flex;
margin-top: 2%;
}
.breaker {
display: none;
}
.breaker:nth-child(4n) {
display: block;
width: 100%;
height: 0;
}
.card {
background-color: #222831;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: rgba(0, 0, 0, 0.7);
color: white;
overflow: auto;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
font-size: 1.2em;
}
