如何在Tailwind CSS Grid中让项目跨2列并推动第二列项目下移

问题核心是默认Grid布局基于网格线定位，若固定行号会导致项目重叠，要实现自动下移需让Grid自动管理行分配：

解决方案步骤 #

• 移除所有固定行定位类（如row-start-*、row-end-*），让Grid自动分配行位置
• 给Grid容器添加auto-rows-min（或auto-rows-max/auto-rows-fr，按需选择），让行高自适应内容
• 跨列项目保留col-span-2，其余项目用col-span-1

示例代码 #

<div class="grid grid-cols-2 gap-4 auto-rows-min">
  <div class="col-span-2 bg-blue-200 p-4">Event 1</div>
  <div class="bg-green-200 p-4">Tue Event 3</div>
  <div class="bg-yellow-200 p-4">Wed Event 4</div>
  <div class="bg-red-200 p-4">Thu Event 5</div>
</div>

原理说明 #

auto-rows-min让每行高度适配内容高度，Grid会自动为跨列项目分配足够的横向空间，后续项目会自动从下一行开始排列，完全避免重叠。如果需要固定行高，可替换为h-[指定高度]类结合auto-rows-[指定高度]。

若必须保留部分行定位，需手动调整后续项目的row-start属性（如跨列项目用row-span-2，则后续项目设row-start-3），但这种方式灵活性较差，优先推荐自动行分配方案。

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