如何在动态高度筛选列下方空白处自动填充商品（无需JS）

问题 #

我的页面布局中，左侧是col-3的产品筛选栏，右侧是col-9的商品列表。筛选栏高度随内容动态变化（通常相当于右侧商品2-3行的高度），我希望用商品填充筛选栏下方的空白区域，但现有结构无法实现这个效果。有没有不用JavaScript的简便方法？

预期效果：左侧筛选栏下方的空白区域被商品填充，商品整体形成连贯的网格布局（黄色商品会占据筛选栏下方的位置，和右侧商品排列一致）。

当前代码结构：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-3 bg-info">
      FILTERS HTML
    </div>

    <div class="col-9">
      <div class="row">
        <div class="col-3 bg-warning">
          PRODUCT HTML
        </div>
        <div class="col-3">
          PRODUCT HTML
        </div>
        <div class="col-3 bg-warning">
          PRODUCT HTML
        </div>
        <div class="col-3">
          PRODUCT HTML
        </div>
        <div class="col-3">
          PRODUCT HTML
        </div>
        <div class="col-3 bg-warning">
          PRODUCT HTML
        </div>
        <div class="col-3">
          PRODUCT HTML
        </div>
        <div class="col-3 bg-warning">
          PRODUCT HTML
        </div>
      </div>
    </div>
  </div>
</div>

解决方案 #

用CSS Grid就能实现，完全不需要JavaScript。核心是把整个商品展示区域（包括筛选栏）设为网格容器，让筛选栏占据左侧列的指定行数，剩余位置由商品自动填充，形成连贯的网格布局。

修改后的代码如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<style>
  .product-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 对应原col-3，4列占满宽度 */
    gap: 1rem; /* 可选，调整商品间的间距 */
  }

  .filters-column {
    grid-column: 1; /* 固定在第一列 */
    grid-row: span 2; /* 占据2行高度，可根据筛选栏实际内容调整行数 */
    background-color: #cce7ff; /* 对应原bg-info样式 */
  }

  .product-item {
    background-color: #fff3cd; /* 对应原bg-warning样式 */
    padding: 1rem;
  }
</style>

<div class="container-fluid p-3">
  <div class="product-grid-container">
    <!-- 筛选栏 -->
    <div class="filters-column p-3">
      FILTERS HTML
    </div>

    <!-- 商品列表 -->
    <div class="product-item">PRODUCT HTML</div>
    <div class="product-item">PRODUCT HTML</div>
    <div class="product-item">PRODUCT HTML</div>
    <div class="product-item">PRODUCT HTML</div>
    <div class="product-item">PRODUCT HTML</div>
    <div class="product-item">PRODUCT HTML</div>
    <div class="product-item">PRODUCT HTML</div>
    <div class="product-item">PRODUCT HTML</div>
    <div class="product-item">PRODUCT HTML</div>
    <div class="product-item">PRODUCT HTML</div>
  </div>
</div>

关键说明 #

• 替换原Bootstrap的row/col结构为CSS Grid容器，grid-template-columns: repeat(4,1fr)对应原布局中一行4个商品的设置。
• 筛选栏通过grid-column:1固定在左侧第一列，grid-row: span 2控制它占据的行数（比如筛选栏高度对应3行商品，就改成span 3）。
• 所有商品作为网格项，会自动填充筛选栏下方的空白区域，实现连贯布局。
• 若要保留响应式特性，可添加媒体查询适配小屏幕：

@media (max-width: 768px) {
  .product-grid-container {
    grid-template-columns: 1fr;
  }
  .filters-column {
    grid-row: span 1;
  }
}

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