I'm currently utilizing media queries to make sure that my card-columns are shown in a responsive manner. However, I have noticed that there is a minimum requirement of 2 cards in each column before it moves on to the next one (from left to right).
This issue leads to empty columns if there aren't at least (2*columns - 1) cards available for display.
Is there any workaround for this situation? My goal is to populate all the columns before moving on to the second row.
Check out this link for reference
<div class="card-columns">
<div class="card">
<img class="card-img-top img-fluid" src="..." alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top img-fluid" src="..." alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top img-fluid" src="..." alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top img-fluid" src="..." alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top img-fluid" src="..." alt="Card image cap">
</div>
</div>
For styling:
.card-columns {
column-count: 1;
}
}
@media screen and (min-width: 576px) {
div.card-columns {
column-count: 2;
}
}
@media screen and (min-width: 768px) {
div.card-columns {
column-count: 3;
}
}
@media screen and (min-width: 992px) {
div.card-columns {
column-count: 4;
}
}