I am attempting to create a CSS layout where, after a specific element like :nth-child(6), the elements will break and form a separate column within the same row. The parent element should split into 2 columns after every 6th element in the same row, then move to the next row and follow the same rule. I know this can be achieved using divs, but I want to make it dynamic by utilizing flexbox and grid.
HTML:
<div class="home__content">
<!-- sub cards -->
<div class="sub__card">
<div class="home__subcardContainer">
<h4>একটা যুগের অবসান, চলে গেলেন সকলের প্রিয় ফেলুদা সকলের প্রিয় ফেলুদা</h4>
</div>
<img class="subcard__image"
src="https://sambadkolkata.in/uploads/post_main_image/1605424509_image_IMG-20201114-WA0230.jpg" alt="Avatar"
style="width:100%">
</div>
<div class="sub__card">
<div class="home__subcardContainer">
<h4>একটা যুগের অবসান, চলে গেলেন সকলের প্রিয় ফেলুদা সকলের প্রিয় ফেলুদা</h4>
</div>
<img class="subcard__image"
src="https://sambadkolkata.in/uploads/post_main_image/1605424509_image_IMG-20201114-WA0230.jpg" alt="Avatar"
style="width:100%">
</div>
</div>
CSS:
.sub__card {
display: flex;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 90%;
border-radius: 5px;
margin: 2%;
}
.sub__card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.home__subcardContainer {
padding: 10px 10px;
}
.subcard__image {
border-radius: 0 5px 5px 0;
max-width: 30%;
}
.home__content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 5% 0%;
}
.home__contentLeft {
flex: 0.5;
}
.home__contentRight {
flex: 0.5;
}
.sub__card:nth-child(1) {
flex-direction: column-reverse;
}
.sub__card:nth-child(1) > .subcard__image {
border-radius: 5px 5px 0 0;
max-width: 100%;
}
.sub__card:nth-child(7) {
flex-direction: column-reverse;
}
.sub__card:nth-child(7) > .subcard__image {
border-radius: 5px 5px 0 0;
max-width: 100%;
}
.sub__card:nth-child(6) {
break-after: always;
}