css - Card-Columns 最小卡数

Question

我正在使用媒体查询响应式地显示卡片列。但是，在开始填充下一列(从左到右)之前，每列中似乎至少有 2 张卡片。

如果没有至少 (2*columns - 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 宽度，在 display: inline-block 上使用 .card例如(最简单的一个)。

.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，这完全取决于您的目标。