Card-Columns最小卡片数问题：响应式布局列填充异常求助

你遇到的这个问题，本质是因为Bootstrap的card-columns是基于CSS 多列布局（Columns） 实现的，而这种布局的默认行为是纵向优先填充，并且浏览器会自动平衡各列的高度（column-fill: balance）。当卡片数量不足以填满所有列的“平衡高度”时，就会出现空白列，也就是你说的“每列至少2张才会填充下一列”的现象。

下面给你两种针对性的解决思路：

思路1：修改card-columns的填充规则 #

如果想继续使用card-columns，可以通过自定义CSS覆盖默认的列填充行为，让内容优先填满所有列再向下排列：

.card-columns {
  /* 关闭列高度平衡，让内容自动填充 */
  column-fill: auto;
}

不过要注意：这个属性在旧版浏览器（比如IE）兼容性不好，但现代主流浏览器（Chrome、Firefox、Edge）都支持。修改后，内容会先填满第一列，再依次填充后续列，不会出现空白列，但各列的高度可能会不一致。

思路2：改用CSS Grid实现行优先布局 #

如果你想要的是先填满一行的所有列，再开始第二行的效果（也就是传统的网格布局逻辑），那么CSS Grid是更合适的选择，完全避开Columns布局的纵向流限制。

实现代码： #

首先替换HTML的容器类：

<!-- 把card-columns换成card-grid -->
<div class="card-grid">
  <div class="card">
    <img class="card-img-top img-fluid" src="你的图片地址" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
  <!-- 更多卡片... -->
</div>

然后添加Grid的响应式样式：

.card-grid {
  display: grid;
  /* 自动填充列，每列最小宽度250px，剩余空间均分 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* 卡片之间的间距 */
  gap: 1.25rem;
}

/* 根据屏幕尺寸调整列数，和Bootstrap的断点对齐 */
@media (max-width: 575.98px) {
  .card-grid {
    grid-template-columns: 1fr; /* 小屏幕1列 */
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr); /* 中等屏幕2列 */
  }
}
@media (min-width: 992px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr); /* 大屏幕3列 */
  }
}

这种方式的优势是：完全符合你“先填满所有列再填充第二行”的需求，布局逻辑更直观，而且各列的宽度和间距可以精确控制，响应式表现也更稳定。

内容的提问来源于stack exchange，提问作者Vgoose