如何在移动设备上创建不等高、不同顺序的响应式网格？

Question

我正在使用 Tailwind CSS 创建响应式网格布局，其中各部分在移动设备和桌面设备上具有不同的顺序。这些部分还根据其内容具有不同的高度。移动布局工作正常，但在桌面上，我无法让第 3 部分填充空白空间并正确向上扩展。

移动布局：

• 各部分应按以下顺序排列：1 → 2 → 4 → 3。

当前代码

<div class="grid grid-cols-1 sm:grid-cols-3 gap-2 auto-rows-auto">
  <div class="bg-gray-300 h-16 sm:col-span-2 order-1">1</div>
  <div class="bg-teal-300 h-64 sm:col-span-2 sm:order-3 order-4">3</div>
  <div class="bg-red-200 h-32 sm:col-span-1 sm:order-1 order-2">2</div>
  <div class="bg-yellow-200 h-32 sm:col-span-1 sm:order-4 order-3">4</div>
</div>

输出 - 桌面

问题

第 3 部分应该填充左侧的剩余高度，但没有正确上升。

预期布局

第 3 部分应升起并填充第 1 部分下方的空间，而第 2 部分和第 4 部分仍堆叠在右侧。

Answer 1

此解决方案仅在您有具体/没有的情况下才有效。儿童的，或者等待砌体属性（

grid-template-rows: masonry;

）以获得完全的浏览器支持。（因为

display: columns;

不允许您具有特定的宽度，砌体是唯一的最后选择）。

您可以创建 3x3 网格，并将第三个项目放置在行的 2/4 和列的 1/2 处。