如何在顺风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

您可以为父div使用网格流行sm :grid-flow- class，为class 4类设置sm，请参见下面的示例。

​

<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>

​