如何在Bootstrap 4中无需jQuery、纯CSS实现同宽异高Pinterest式网格？

当然可以！完全不用依赖jQuery，也能避开会打乱列表顺序的CSS Column属性，用纯CSS结合Bootstrap 4就能实现你想要的黑色Pinterest风格网格，而且能完美保持内容的原始顺序。下面是具体的实现方案：

核心思路 #

我们利用CSS Grid来实现不规则高度的网格布局，同时结合Bootstrap 4的响应式断点适配不同屏幕尺寸，既保留Bootstrap的响应式优势，又实现Pinterest的错落效果。CSS Grid默认按行顺序排列内容，不会像CSS Column那样打乱顺序，完全符合你的需求。

完整代码实现 #

第一步：引入Bootstrap 4 CSS #

首先确保页面已经引入Bootstrap 4的基础CSS（可以用本地文件或CDN，这里不再赘述）。

第二步：HTML结构 #

<div class="container py-4">
  <div class="pinterest-grid">
    <!-- 网格项1 -->
    <div class="pinterest-item bg-black text-white p-4" style="grid-row-end: span 3;">
      <h3>内容块1</h3>
      <p>这是一个高度为3倍基础行的内容块</p>
    </div>
    <!-- 网格项2 -->
    <div class="pinterest-item bg-black text-white p-4" style="grid-row-end: span 2;">
      <h3>内容块2</h3>
      <p>这是一个高度为2倍基础行的内容块</p>
    </div>
    <!-- 网格项3 -->
    <div class="pinterest-item bg-black text-white p-4" style="grid-row-end: span 4;">
      <h3>内容块3</h3>
      <p>这是一个高度为4倍基础行的内容块</p>
    </div>
    <!-- 继续添加更多内容块... -->
    <div class="pinterest-item bg-black text-white p-4" style="grid-row-end: span 3;">
      <h3>内容块4</h3>
      <p>这是一个高度为3倍基础行的内容块</p>
    </div>
    <div class="pinterest-item bg-black text-white p-4" style="grid-row-end: span 2;">
      <h3>内容块5</h3>
      <p>这是一个高度为2倍基础行的内容块</p>
    </div>
  </div>
</div>

第三步：自定义CSS #

.pinterest-grid {
  display: grid;
  /* 基础列宽：最小280px，自适应填充 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* 设置基础行高，用于控制内容块的高度倍数 */
  auto-rows: 10px;
  /* 网格间距，模拟Pinterest的留白 */
  grid-gap: 1.5rem;
}

.pinterest-item {
  border-radius: 0.5rem;
  overflow: hidden;
  /* 确保内容不会溢出 */
}

/* 结合Bootstrap 4的响应式断点，调整列数和间距 */
@media (max-width: 575.98px) {
  .pinterest-grid {
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .pinterest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .pinterest-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .pinterest-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

关键细节说明 #

1. 保持顺序：CSS Grid默认采用grid-auto-flow: row的排列方式，内容会按从上到下、从左到右的原始顺序排列，完全不会像CSS Column那样先填满列再换行，完美解决顺序问题。
2. 异高控制：通过grid-row-end: span N来设置每个内容块跨越的基础行数（N为数字），数值越大，内容块高度越高。你可以根据实际内容长度调整这个值，完全不需要JS介入。
3. 响应式适配：我们结合Bootstrap 4的官方断点（sm、md、lg）来调整网格列数，确保在手机、平板、桌面端都有良好的显示效果。
4. 黑色风格：通过Bootstrap内置的bg-black类设置黑色背景，搭配text-white实现文字对比，你也可以自定义background-color: #111;这类样式来调整黑色深浅。

扩展优化 #

• 如果需要动态生成内容，可以用后端语言（比如PHP、Node.js）给每个内容块随机分配不同的span值，实现更自然的错落效果。
• 可以给.pinterest-item添加过渡动画，增强交互性：

.pinterest-item {
  transition: transform 0.3s ease;
}
.pinterest-item:hover {
  transform: translateY(-5px);
}

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