TailwindCSS 具有特定元素顺序的砌体
我有一个包含 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>
我想要有这样的东西带有自动高度元素： 
I have a grid layout with 4 elements that should have a specific place in desktop and mobile sizes and it's ok besides the masonry. the third and fourth elements are not near to each other!
see jsfiddle example: 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>
I want to have something like this with auto height elements:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您想要做的是通过使用列而不是行来打破网格布局。不幸的是这是不可能的。实现此目的的唯一方法是将内容放入两个“容器”列中，从而切断行连接。
这是最接近原始代码的方法：
代码结果截图：
这里是相同的，但使用 Flexbox 而不是网格：
代码结果截图：
Tailwind 列（砖石布局）
如果您不想手动将您的内容分成不同的“容器”列，您可以使用 Tailwind 列。这更像是真正的砖石布局，其中内容将自动流入 2 个（或更多）列。
不幸的是，使用这种方法，无法在原始代码中保持 2:1 的列宽比。列的宽度相等。
代码结果截图：
What you're trying to do is break the grid layout by using the columns but not the rows. Unfortunately this is impossible. The only way you can achieve this is by putting the content into two "container" columns thereby severing the row connections.
Here is the method that is closest to your original code:
Screenshot of code result:
Here is the same but using Flexbox instead of grid:
Screenshot of code result:
Tailwind Columns (Masonry Layout)
If you don't want to manually break your content up into distinct "container" columns, you can use Tailwind columns. This is more like a true masonry layout where content will automatically flow into 2 (or more) columns.
Unfortunately, using this method, there is no way to maintain the 2:1 column width ratio in your original code. The columns will be equal widths.
Screenshot of code result:
Tailwind 的
columns实用程序应该适合您的用例！Tailwind's
columnsutility should work for your use case!