纯CSS实现带大单元格的响应式商品列表网格布局问题

核心方案 #

放弃Bootstrap网格，直接用CSS Grid实现不规则网格布局——它天生支持单元格跨列/跨行，能自动让普通商品环绕大单元格排列，再配合媒体查询适配不同屏幕尺寸，完全不需要JavaScript。

完整代码实现 #

HTML结构 #

<div class="product-grid">
  <!-- 大尺寸商品单元格 -->
  <div class="product-item product-item--large">
    <img src="your-large-product.jpg" alt="Featured Product">
    <h3>重点商品</h3>
    <p>$129.99</p>
  </div>
  <!-- 普通商品单元格 -->
  <div class="product-item">
    <img src="product-1.jpg" alt="Product 1">
    <h3>商品1</h3>
    <p>$39.99</p>
  </div>
  <div class="product-item">
    <img src="product-2.jpg" alt="Product 2">
    <h3>商品2</h3>
    <p>$49.99</p>
  </div>
  <div class="product-item">
    <img src="product-3.jpg" alt="Product 3">
    <h3>商品3</h3>
    <p>$59.99</p>
  </div>
  <div class="product-item">
    <img src="product-4.jpg" alt="Product 4">
    <h3>商品4</h3>
    <p>$69.99</p>
  </div>
  <!-- 可添加更多商品 -->
</div>

CSS样式 #

/* 基础网格容器 */
.product-grid {
  display: grid;
  gap: 1.5rem; /* 商品间的间距 */
  padding: 1rem;
}

/* 通用商品单元格样式 */
.product-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}

.product-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

/* 桌面端布局（默认4列） */
.product-grid {
  grid-template-columns: repeat(4, 1fr);
}
.product-item--large {
  grid-column: span 2; /* 占2列宽度 */
  grid-row: span 2;    /* 占2行高度 */
}
.product-item--large img {
  height: 420px; /* 匹配2行普通商品的高度+间距 */
}

/* 平板端布局（3列） */
@media (max-width: 992px) and (min-width: 576px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* 大单元格占2列2行，旁边刚好容纳2个普通商品（上下排列） */
  .product-item--large {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* 移动端布局（单列） */
@media (max-width: 575px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
  /* 大单元格占满整行，和普通商品样式统一 */
  .product-item--large {
    grid-column: span 1;
    grid-row: span 1;
  }
  .product-item--large img {
    height: 200px;
  }
}

关键细节说明 #

• CSS Grid特性：通过grid-column和grid-row直接定义大单元格的占据范围，普通商品会自动填充剩余网格空间，完美实现环绕效果。
• 平板端适配逻辑：3列布局下，大单元格占2列2行，剩余1列刚好能放下2个普通商品（垂直排列），完全符合需求。
• 移动端体验：自动切换为单列布局，大单元格占满宽度，避免小屏幕上的布局错乱。
• 纯CSS实现：所有布局逻辑依赖CSS Grid和媒体查询，无需任何JavaScript代码。

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