如何用Tailwind CSS实现动态高度的自适应网格布局？

我想要创建一种grid或flexbox布局（参考目标布局图），但每个盒子内的内容为动态数据，无法预知盒子高度。目前使用Tailwind CSS的grid grid-cols-3布局，每行高度由该行最高元素决定，导致布局出现空隙（参考实际布局图），且无法提前设置row-span-2属性。现有代码如下：

<div class=" grid grid-cols-3 m-12 gap-12 justify-center">
    <div id="post" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 1/>
    </div>
    <div id="post2" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 2/>
    </div>
    <div id="post3" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 3/>
    </div>
    <div id="post4" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 4/>
    </div>
    <div id="post5" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 5/>
    </div>
    <div id="pos6t" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 6/>
    </div>
</div>

请问如何实现目标布局？

方法1：CSS原生Masonry布局 #

CSS Grid已支持原生Masonry布局，无需额外工具，适合现代浏览器。修改容器类并添加自定义样式：

<div class="grid grid-cols-3 m-12 gap-12 justify-center masonry">
    <!-- 子元素保持不变 -->
</div>

自定义CSS（可放入Tailwind全局样式文件）：

.masonry {
    grid-template-rows: masonry;
}

注意：原生Masonry目前仅在Chromium系浏览器（Chrome、Edge）稳定支持，Firefox需手动开启layout.css.grid-template-masonry-value.enabled配置，Safari暂不支持。

方法2：Tailwind CSS Masonry插件 #

若需更好的浏览器兼容性，可使用Tailwind官方维护的Masonry插件：

1. 安装插件：

npm install @tailwindcss/masonry

2. 在tailwind.config.js中配置：

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

3. 直接修改容器类：

<div class="grid grid-cols-3 m-12 gap-12 justify-center masonry">
    <!-- 子元素保持不变 -->
</div>

方法3：Flexbox列布局（兼容旧浏览器） #

针对不支持Masonry的浏览器，可采用Flexbox列布局配合断行控制：

<div class="flex flex-col md:flex-row m-12 gap-12">
    <!-- 第一列容器 -->
    <div class="flex flex-col gap-12 w-full md:w-1/3">
        <div id="post" class="rounded-xl overflow-hidden break-inside-avoid">
            <Box 1/>
        </div>
        <div id="post4" class="rounded-xl overflow-hidden break-inside-avoid">
            <Box 4/>
        </div>
    </div>
    <!-- 第二列容器 -->
    <div class="flex flex-col gap-12 w-full md:w-1/3">
        <div id="post2" class="rounded-xl overflow-hidden break-inside-avoid">
            <Box 2/>
        </div>
        <div id="post5" class="rounded-xl overflow-hidden break-inside-avoid">
            <Box 5/>
        </div>
    </div>
    <!-- 第三列容器 -->
    <div class="flex flex-col gap-12 w-full md:w-1/3">
        <div id="post3" class="rounded-xl overflow-hidden break-inside-avoid">
            <Box 3/>
        </div>
        <div id="pos6t" class="rounded-xl overflow-hidden break-inside-avoid">
            <Box 6/>
        </div>
    </div>
</div>

自定义CSS：

.break-inside-avoid {
    break-inside: avoid;
}

注意：动态数据场景下，需用JS将元素按顺序分配到不同列容器中（如依次插入列1、列2、列3）。

方法4：JS动态计算布局（完全自定义） #

若需精细控制布局，可通过JS动态计算元素高度，将下一个元素放入当前高度最小的列：

1. 给容器添加ID：

<div id="masonry-container" class="grid grid-cols-3 m-12 gap-12 justify-center">
    <!-- 子元素保持不变 -->
</div>

2. 添加JS逻辑：

const container = document.getElementById('masonry-container');
const items = Array.from(container.children);
const columns = 3;
const columnHeights = new Array(columns).fill(0);
const gap = parseInt(getComputedStyle(container).gap);

items.forEach((item, index) => {
    // 找到当前高度最小的列
    const minHeightIndex = columnHeights.indexOf(Math.min(...columnHeights));
    // 设置元素的Grid列位置
    item.style.gridColumnStart = minHeightIndex + 1;
    // 更新列高度（包含间距）
    columnHeights[minHeightIndex] += item.offsetHeight + gap;
});

注意：需在元素加载完成后执行（如DOMContentLoaded事件、React的useEffect钩子），动态更新内容后需重新计算。

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