使用TailwindCSS columns类实现Masonry布局时元素高度异常如何修复？

问题原因 #

1. CSS多列布局的默认特性：columns类依赖的CSS多列布局，默认会将内容流式分割到不同列中，即便元素设置了固定高度，也可能因为布局引擎的列高度计算逻辑，导致元素被“拆分”，视觉上呈现高度异常的效果。
2. margin与列间距的冲突：子元素设置的mb-4（margin-bottom）在多列布局中，会和父元素的gap-4产生叠加干扰，进一步加剧布局高度的计算错误。

修复步骤 #

给每个子元素添加break-inside-avoid类，强制元素保持完整，不被列布局拆分，同时保留原有样式即可解决问题。

修改后的代码：

<div className="columns-2 gap-4">
    <div className="block h-[120px] mb-4 bg-[#0000ff] break-inside-avoid">                                            
    </div>

    <div className="block h-[120px] mb-4 bg-red-500 break-inside-avoid">                                            
    </div>

    <div className="block h-[120px] mb-4 bg-[#2e8b57] break-inside-avoid">                                            
    </div>                
</div>

原理说明 #

break-inside-avoid对应的CSS属性是break-inside: avoid，它告诉浏览器不要在当前元素内部进行列分割，确保每个子元素作为一个完整的块级元素排列在列中，这样元素的固定高度、margin等样式就能正常生效，布局也会符合预期的Masonry效果。

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