Tailwind Columns内容截断：瀑布流布局实现异常排查

我参照Tailwind官方文档的columns用法编写React组件，想要实现瀑布流布局，代码如下：

const Tile = (props) => {
  const { data } = props;

  return (
    <div className='rounded border p-4 mb-4'>
      {data}
    </div>
  );
};

const Masonry = (props) => {
  const { data } = props;

  <div className='columns-3'>
    {data.map((item) => (
      <Tile
        key={item.name}
        data={item}
      />
    ))}
  </div>
};

但页面内容出现了截断（截图：），我尝试给容器添加自定义高度，问题依然存在，请问哪里操作出错了？

你有两个关键问题需要修正：

1. Masonry组件缺少return语句
   你的Masonry组件里直接写了JSX但没有用return返回，这会导致组件无法正确渲染内容，引发异常。必须把外层的<div>用return包裹。

2. 未阻止子元素跨列拆分
   使用columns布局实现瀑布流时，浏览器默认可能会将单个Tile元素拆分到不同列中，导致内容截断。需要给每个Tile添加break-inside: avoid样式，对应Tailwind的break-inside-avoid类，强制每个Tile保持完整，不被跨列分割。

修正后的完整代码：

const Tile = (props) => {
  const { data } = props;

  return (
    <div className='rounded border p-4 mb-4 break-inside-avoid'>
      {data}
    </div>
  );
};

const Masonry = (props) => {
  const { data } = props;

  return (
    <div className='columns-3'>
      {data.map((item) => (
        <Tile
          key={item.name}
          data={item}
        />
      ))}
    </div>
  );
};

这样修改后，组件能正确渲染，同时Tile不会被跨列截断，瀑布流布局就能正常工作了。

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