Card-Columns minimum cards

Question

I'm using media queries to display card-columns responsively. However, it seems there's a minimum of 2 cards in each column before it starts to populate the next column (from left to right).

This causes blank columns if there are not at least (2*columns - 1) cards to display.

Is there a workaround? I want all columns to be populated before the second row is populated.

https://codepen.io/Vgoose/pen/wjgKPP

<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;
  }
}

Answer 1

I am afraid that columns-count is not suitable option for this case, as is first fill whole height of columns. Basically it is created for columns of text. This is why it does not work for you - if you increase the value of .card-column height, the division of .cards would be even more unbalanced.

In this case I would recommend to work on .card width on different window widths, with .card on display: inline-block for example (simplest one).

 .card-columns { /* display: flex; flex-wrap: wrap; justify-content: flex-start; */ border: 1px solid #f00; font-size: 0; } .card { width: 100%; display: inline-block; border: 1px solid #000; box-sizing: border-box; font-size: 16px; } @media screen and (min-width: 576px) { .card { width: 50%; } } @media screen and (min-width: 768px) { .card { width: 33.33% } } @media screen and (min-width: 992px) { .card { width: 25%; } } 

 <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> 

Of course, there are many other options, like flex or css grid, it all depends what are your goals.