如何利用Tailwind CSS制作三栏瀑布流布局_结合columns-3属性-css教程-PHP中文网

columns-3 不能实现真正瀑布流，因其按列切分导致图片截断、点击错位；原生方案需 css grid + masonry（chrome/edge 116+支持），但 firefox/safari 不支持，推荐用 vanilla-masonry 等 js 库，并注意图片宽高预留与加载时机。

如何利用tailwind css制作三栏瀑布流布局_结合columns-3属性

columns-3 在瀑布流中为什么不能直接用

直接写 columns-3 不会得到你想要的“图片高度不一、自动错落”的瀑布流，它只是把内容按列切分——文字会被断行、图片会被截断、子元素无法跨列、点击区域错位。浏览器原生 columns 是为报刊排版设计的，不是为卡片式瀑布流服务的。

真正可用的瀑布流方案只有 CSS Grid + Masonry（有限支持）或 JS 库

目前唯一被主流浏览器（Chrome 116+、Edge 116+）原生支持的真瀑布流是 display: grid 配合 grid-template-rows: masonry，但 Tailwind 默认不提供该工具类，需手动添加：

/* 在 tailwind.config.js 的 theme.extend 的 fontFamily 或其他位置加 */
module.exports = {
  theme: {
    extend: {
      gridTemplateRows: {
        masonry: 'masonry',
      },
    },
  },
}

然后在 HTML 中使用：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

<div class="grid grid-cols-3 grid-rows-masonry gap-4">
  <div class="bg-slate-100 rounded-lg">@@##@@</div>
  <div class="bg-slate-200 rounded-lg">@@##@@</div>
  <div class="bg-slate-300 rounded-lg">@@##@@</div>
</div>

grid-rows-masonry 必须配合 grid-cols-3 和显式 gap，否则行为不可控
所有子项必须是直接子元素，不能嵌套 wrapper 容器
Firefox 和 Safari 当前完全不支持 masonry，上线前务必检查 caniuse

兼容性要求高时，用轻量 JS 库代替 CSS 方案

如果要支持 Firefox/Safari 或需要更稳定控制（比如懒加载、动画、响应式列数切换），推荐用 masonic（React）或 vanilla-masonry（纯 JS），而不是强行 hack columns-3。例如用 vanilla-masonry：

<div id="masonry-grid" class="grid-cols-3">
  <div class="bg-slate-100 rounded-lg">...</div>
  <div class="bg-slate-200 rounded-lg">...</div>
</div>
<p><script>
const grid = document.getElementById('masonry-grid');
new Masonry(grid, {
columnWidth: '.grid-cols-3 > *', // 按子项宽度算列宽
gutter: 16,
});
</script></p>