具有特定元素顺序的 Tailwind CSS 砌体答案

【问题标题】：TailwindCSS masonry with specific order of elements具有特定元素顺序的 Tailwind CSS 砌体
【发布时间】：2022-11-02 11:37:41
【问题描述】：

我有一个包含 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>

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

【问题讨论】：

标签： grid tailwind-css

【解决方案1】：

Tailwind 的 columns utility 应该适用于您的用例！

【讨论】：