如何使用 TailwindCSS 重新创建示例中的布局？

Question

我想让行相互插入，如下所示：

问题是目前我无法插入行，所以我最终得到的布局如下所示：

或者我所拥有的更真实的例子：

我尝试了很多方法，包括 Grid Auto Flow、Inline Grid 以及制作子 Inline Block，但似乎没有任何效果。据我检查，每一列的高度都和右边的一样高，我不想要。

Answer 1

我想不出使用网格布局实现所需输出的解决方案。

一种可行的方法是使用 w-1/2 设置两列的宽度，并将第二列 absolute 仅定位在父列的右上角。例如，请检查下面的代码片段。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="relative h-full w-full">
  <div class="w-1/2">
    <div class="w-full h-20 bg-blue-400"></div>
    <div class="w-full h-10 bg-yellow-400"></div>
    <div class="w-full h-36 bg-red-400"></div>
  </div>
  <div class="absolute right-0 top-0 w-1/2"> 
    <div class="w-full h-40 bg-green-400"></div>
    <div class="w-full h-36 bg-indigo-400"></div>
  </div>
</div>

如何使用 TailwindCSS 重新创建示例中的布局？

How can I recreate the layout in the example Using TailwindCSS?

reactjs

tailwind-css