求助：如何用Tailwind CSS实现首栏占70%的响应式两栏布局

我尝试用Tailwind 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>

你的代码问题出在网格列的配置逻辑上，要实现需求的布局，可按以下方式修改：

• 核心逻辑：默认移动端用单栏布局，大屏设备直接指定列宽比例
• 修正代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />

<div class="grid grid-cols-1 md:grid-cols-[70%_30%] gap-3">
    <div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100">第一栏（70%）</div>
    <div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100">第二栏（30%）</div>
</div>

• 关键说明：
  • grid-cols-1：移动端默认单栏，两栏自动占满全屏宽度
  • md:grid-cols-[70%_30%]：中等屏幕及以上，直接定义第一栏70%、第二栏30%宽度，精准匹配占比要求
  • 若要调整响应式触发的断点（比如想用大屏才生效），把md:替换成lg:即可

内容的提问来源于stack exchange，提问作者David Andor