如何使用Tailwind CSS实现动态高度自适应的马赛克网格布局

纯原生标准Grid布局无法实现你要的效果：标准Grid默认同一行的所有网格项高度会强制对齐该行最高项的高度，因此矮项会被拉伸，出现大块空白，就是你当前遇到的问题。

你需要的是Masonry（瀑布流/马赛克）布局，以下两种基于Tailwind的实现方案都可以满足需求：项高度随内容自动适配，新增/删除元素、折叠展开内容时会自动重排，没有多余拉伸空白。

方案1：无依赖原生实现（推荐，兼容性最好） #

不需要安装任何额外插件，用Tailwind内置的CSS多列布局类即可实现，所有现代浏览器全兼容。
只需要把你原有代码里的Grid容器替换为多列容器，给子项加上防拆分和间距类即可：

<div class="p-10 bg-slate-200">
  <!-- 替换原grid类为columns多列类 -->
  <div class="mt-10 columns-2 gap-4">
    <!-- 子项加mb-4设置纵向间距，break-inside-avoid防止内容被列拆分 -->
    <div class="mb-4 break-inside-avoid bg-red-400">
      <div>TEST</div>
      <div>TEST</div>
      <div>TEST</div>
      <div>TEST</div>
    </div>
    <div class="mb-4 break-inside-avoid bg-red-200">02</div>
    <div class="mb-4 break-inside-avoid bg-red-200">03</div>
    <div class="mb-4 break-inside-avoid bg-red-400">
      <div>TEST</div>
      <div>TEST</div>
      <div>TEST</div>
      <div>TEST</div>
    </div>
  </div>
</div>

注意：多列布局的排列逻辑是优先填满第一列，再填充第二列。如果你需要项严格按照从左到右、逐行排列的顺序，用下面的方案2。

方案2：官方Masonry插件（标准网格排列顺序） #

如果需要保持Grid从左到右的排列逻辑，可以用Tailwind官方维护的@tailwindcss/masonry插件实现。

1. 安装依赖

npm install @tailwindcss/masonry

2. 在Tailwind配置文件中注册插件

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    require('@tailwindcss/masonry'),
  ]
}

3. 替换原有Grid类为masonry类即可

<div class="p-10 bg-slate-200">
  <div class="mt-10 masonry masonry-cols-2 gap-4">
    <div class="masonry-item bg-red-400">
      <div>TEST</div>
      <div>TEST</div>
      <div>TEST</div>
      <div>TEST</div>
    </div>
    <div class="masonry-item bg-red-200">02</div>
    <div class="masonry-item bg-red-200">03</div>
    <div class="masonry-item bg-red-400">
      <div>TEST</div>
      <div>TEST</div>
      <div>TEST</div>
      <div>TEST</div>
    </div>
  </div>
</div>

两种方案都支持响应式配置，比如要在大屏下显示3列、小屏显示1列，只需要给容器加对应断点类即可：方案1加sm:columns-1 md:columns-2 lg:columns-3，方案2加sm:masonry-cols-1 md:masonry-cols-2 lg:masonry-cols-3。

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