如何使用TailwindCSS实现错落交错的行排列布局？

你遇到的列等高问题是常规Flex、Grid布局的默认特性，同一行元素会自动对齐高度，无法实现错落效果，可使用以下两种纯CSS方案实现需求：

方案1：CSS多列布局（兼容性最优） #

该方案支持所有现代浏览器，无需引入JavaScript即可实现自动错落排列：
父容器样式：

.waterfall-container {
  /* 定义列数，也可设置column-width实现自适应列数 */
  column-count: 3;
  /* 列与列的间距 */
  column-gap: 16px;
}

子元素样式：

.waterfall-item {
  /* 避免单个子元素被截断拆分到两列 */
  break-inside: avoid;
  /* 保留你原有子元素样式即可，示例如下 */
  margin-bottom: 16px;
  width: 100%;
}

方案2：Grid原生瀑布流布局（适合兼容要求低的场景） #

新版浏览器已支持Grid原生瀑布流配置，写法更灵活可控：

.waterfall-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  /* 核心配置：行方向使用瀑布流规则，不统一等高 */
  grid-template-rows: masonry;
}

该方案目前部分旧版浏览器、Safari还未完全支持，面向全量用户的项目优先选择方案1。

之前方案无效原因说明 #

• Inline Block方案存在基线对齐、空白节点异常问题，无法自动实现错落排列
• 默认Grid、Flex布局按行/列划分网格，同一行所有元素高度会对齐到当前行最高元素，自然无法实现错落效果

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