TailwindCSS 具有特定元素顺序的砌体

Question

我有一个包含 4 个元素的网格布局，这些元素应该在桌面和移动设备尺寸中占有特定的位置，除了砌体之外，它还可以。第三个和第四个元素彼此不靠近！

参见 jsfiddle 示例：https://jsfiddle.net/amnshojaei/0krpufxa/6/

<div class="grid grid-cols-12 gap-[24px]">
  <div class="h-[200px] col-span-full lg:col-start-1 lg:col-end-9 lg:row-start-1 lg:row-end-2">1</div>
  <div class="h-[200px] col-span-full lg:col-start-1 lg:col-end-9 lg:row-start-2 lg:row-end-3">2</div>
  <div class="h-[100px] col-span-full lg:col-start-9 lg:col-end-13 lg:row-start-1 lg:row-end-2">3</div>
  <div class="h-[100px] col-span-full lg:col-start-9 lg:col-end-13 lg:row-start-2 lg:row-end-3">4</div>
</div>

我想要这样的东西带有自动高度元素：

Answer 1

您想要做的是打破网格布局并使用列而不是行。不幸的是这是不可能的。实现此目的的唯一方法是将内容放入两个“容器”列中，从而切断行连接。

这是最接近原始代码的方法：

<div class="p-[36px] grid grid-cols-12 gap-[24px]">
  <div class="col-span-8 space-y-[24px]">
    <div class="bg-gray-200 h-[200px] w-full">1</div>
    <div class="bg-gray-200 h-[200px] w-full">2</div>
  </div>
  <div class="col-span-4 space-y-[24px]">
    <div class="bg-gray-200 h-[100px] w-full">3</div>
    <div class="bg-gray-200 h-[100px] w-full">4</div>
  </div>
</div>

这里是相同的，但使用 Flexbox 而不是网格：

<div class="p-[36px] flex gap-[24px]">
  <div class="flex flex-col w-2/3 gap-[24px]">
    <div class="bg-gray-200 h-[200px] w-full">1</div>
    <div class="bg-gray-200 h-[200px] w-full">2</div>
  </div>
  <div class="flex flex-col w-1/3 gap-[24px]">
    <div class="bg-gray-200 h-[100px] w-full">3</div>
    <div class="bg-gray-200 h-[100px] w-full">4</div>
  </div>
</div>

顺风柱（砖石布局）

如果您不想手动将内容分成不同的“容器”列，您可以使用 Tailwind columns。这更像是真正的砖石布局。

不幸的是，使用这种方法，无法在原始代码中保持 2:1 的列宽比。各列的宽度相等。

<div class="p-[36px] columns-2 gap-[24px] space-y-[24px]">
  <div class="bg-gray-200 h-[200px] w-full break-inside-avoid-column">1</div>
  <div class="bg-gray-200 h-[200px] w-full break-inside-avoid-column">2</div>
  <div class="bg-gray-200 h-[100px] w-full break-inside-avoid-column">3</div>
  <div class="bg-gray-200 h-[100px] w-full break-inside-avoid-column">4</div>
</div>

Answer 2

Tailwind 的

columns

实用程序 应该适合您的用例！