TailwindCSS columns排列方向错误，如何改为先行后列布局？

你的问题出在使用了columns-2——这是多列流式布局，它会先垂直填满第一列，再往第二列填充，所以当子元素高度不一致时，就会出现元素错位到下一列的情况，自然达不到你要的行优先排列效果。

要实现第一行显示div1和div2、第二行显示div3和div4的行优先网格，直接替换成Tailwind的Grid布局即可：

<div class="relative">
    <div class="grid grid-cols-2 gap-4">
        <div class="bg-red-500 p-10">1</div>
        <div class="bg-blue-500 p-10 py-14">2</div>
        <div class="bg-orange-500 p-10 py-20">3</div>
        <div class="bg-green-500 p-10">4</div>
    </div>
</div>

关键修改点： #

• 移除外层不必要的flex类（Grid本身是块级布局，不需要外层flex包裹）
• 把columns-2 space-y-4替换为grid grid-cols-2 gap-4：
  • grid-cols-2定义2列网格
  • gap-4同时设置列间距和行间距（等价于gap-x-4 gap-y-4），替代原来的gap-4 space-y-4
• Grid默认是行优先排列（grid-flow-row），会先填满一行的所有列，再自动换行，完美匹配你要的排列顺序，不受子元素高度影响。

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