Минимум карт

Question

Я использую медиа-запросы для быстрого отображения столбцов карт. Однако, кажется, что в каждом столбце есть минимум 2 карты, прежде чем он начнет заполнять следующий столбец (слева направо).

Это приводит к появлению пустых столбцов, если нет по крайней мере (2 * столбцов - 1) карт для отображения.

Есть ли обходной путь? Я хочу, чтобы все столбцы были заполнены до заполнения второго ряда.

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>

для укладки:

.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

Боюсь, что columns-count не подходит для этого случая, так как сначала заполняют всю высоту столбцов. В основном это создано для столбцов текста. Вот почему это не работает для вас - если вы увеличите значение .card-column высота, деление .cards будет еще более несбалансированным.

В этом случае я бы порекомендовал работать с шириной .card при разной ширине окна, например, с .card на display: inline-block (самый простой).

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

Конечно, есть много других опций, таких как flex или css grid, все зависит от ваших целей.