如何在順風 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>