使用 CSS Grid (Tailwind) 的 Youtube 布局

Question

我知道你很忙，你给我的任何时间我都非常重视，将不胜感激。

我正在尝试创建一个类似于 Youtube 的布局，其中包含视频播放器、侧边栏和视频下方的 cmets。我正在尝试使用带有 Tailwind CSS 的网格，但评论部分（3 和 4）并未位于视频播放器（1）下方。这是我想的桌面布局： enter image description here

在移动端的顺序应该是视频，侧边栏，然后是 cmets。

到目前为止，这是我的代码：

<div class="container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-6">
        <div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100 col-end-auto md:col-span-8" style="height: 200px;">1</div>
        <div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100 col-end-auto md:col-span-4" style="height: 400px;">2</div>
        <div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100 col-end-auto md:col-span-4">3</div>
        <div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100 col-end-auto md:col-span-4">4</div>
    </div>
</div>

我很乐意提供任何帮助。

Answer 1

假设您喜欢移动设备尺寸（sm 及以上）以上的一切工作方式。您可以将订单实用程序类order-1、order-2 等添加到您的主要元素中，并添加sm:order-none 到它们，以确保订单仅适用于移动设备。

这是 Tailwind Play 上的示例https://play.tailwindcss.com/RX1JQHMYgo