如何用Tailwind CSS创建高度不等、移动端排序不同的响应式网格

问题背景 #

使用Tailwind CSS构建响应式网格布局，要求：

• 移动端区块顺序：1 → 2 → 4 → 3（当前已实现）
• 桌面端：区块1占左两列上方，区块3填充其下方剩余高度；右侧列上下堆叠区块2和4

当前桌面端存在问题：区块3无法向上填充区块1下方的空白区域，效果与预期不符：

当前桌面端效果	预期桌面端效果

问题原因 #

原代码仅通过order调整显示顺序，未明确桌面端网格的行高度分配和区块的网格位置，导致区块3无法自动占据区块1下方的剩余垂直空间。

解决方案 #

通过定义桌面端的网格行结构，结合列/行定位属性，同时保留移动端的排序规则：

<script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-cols-1 sm:grid-cols-3 sm:grid-rows-[auto_1fr] gap-2">
  <!-- 区块1：移动端order1，桌面端占左2列第1行 -->
  <div class="bg-gray-300 h-16 sm:col-span-2 order-1">1</div>
  <!-- 区块3：移动端order4，桌面端占左2列第2行（自动填充剩余高度） -->
  <div class="bg-teal-300 sm:col-span-2 order-4 sm:order-2">3</div>
  <!-- 区块2：移动端order2，桌面端占右1列第1行 -->
  <div class="bg-red-200 h-32 sm:col-span-1 order-2 sm:order-3">2</div>
  <!-- 区块4：移动端order3，桌面端占右1列第2行 -->
  <div class="bg-yellow-200 h-32 sm:col-span-1 order-3 sm:order-4">4</div>
</div>

核心修改说明 #

• 桌面端网格行配置：sm:grid-rows-[auto_1fr] 设定桌面端网格为两行，第一行高度随区块1内容自适应，第二行占据所有剩余垂直空间，确保区块3能填满空白。
• 区块网格定位：通过sm:col-span-2指定区块1和3占据左侧两列，区块2和4占据右侧一列；无需额外row-span，因为每行仅对应一个区块的垂直位置。
• 响应式排序：移动端使用order-*维持1→2→4→3的顺序，桌面端通过sm:order-*调整为符合布局的显示顺序，互不干扰。

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