如何在顺风 css 中制作两个网格响应式布局

Question

我正在尝试使用顺风 CSS 制作两列响应式布局，其中第一列将占用 70% 并且两列都将在移动设备上变为全宽。 我已经尝试了以下方法，但似乎我实际上错过了一些东西，结果不是我想要的。 请我需要有人帮忙。

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" /> <div class="grid grid-cols-5 md:grid-cols-1 lg:grid-cols-2 gap-3"> <div class="col-span-4 flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100">2</div> <div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100">4</div> </div>

Answer 1

您可以将 grid-flow-row sm:grid-flow-col class 用于父 div 并将 sm 用于 col-span-4 class，请参见下面的示例。

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" /> <div class="grid grid-flow-row sm:grid-flow-col gap-3"> <div class="sm:col-span-4 flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100">2</div> <div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100">4</div> </div>