如何在TailwindCSS v3列网格中跨行合并单元格并调整布局

默认网格布局是行优先填充，会先填满当前行的所有列再进入下一行，导致第一个短元素下方的空白无法被后续元素利用。要让第三个div（标<b>3</b>的元素）紧跟第一个div的末尾布局，可通过以下调整实现：

修改后的代码 #

<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-1 gap-2 md:grid-cols-2 md:grid-flow-dense">
  <div class="order-1 w-full bg-blue-500 text-center"><b>1</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, whenpassages,</div>
  <div class="order-3 w-full bg-blue-500 text-center md:order-2 md:row-span-2"><b>2</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
  <div class="order-2 w-full bg-blue-500 text-center md:order-3"><b>3</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="order-4 w-full bg-blue-500 text-center md:order-4"><b>4</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>

关键调整说明 #

1. 启用密集网格布局：给容器添加md:grid-flow-dense，让网格自动填补布局中的空白区域，确保第三个div能紧跟第一个div的末尾填充。
2. 调整右侧元素行跨度：给第二个div添加md:row-span-2，让它占据两行高度，匹配左侧第一个div+第三个div的总高度，避免布局错位。
3. 优化元素排序：调整第三个div的md:order-3，确保它在第一个div之后、第四个div之前渲染，自然填充左侧空白。
4. 移除冗余类：删除原代码中多余的grid-rows类，Tailwind会根据内容自动生成网格行。

内容的提问来源于stack exchange，提问作者Ahashan Alam Sojib