TailwindCSS如何实现不同占比的响应式网格布局？

直接调整网格容器和列的跨列规则即可满足需求，修改逻辑如下：

• 网格容器默认设置为1列，适配sm断点以下两列上下堆叠的需求
• sm断点触发时切换为2列布局，实现sm、md尺寸下两列各占50%的效果
• lg断点触发时切换为10列布局，方便实现3:7的比例分配
• 图片列在lg断点下跨3列，对应30%宽度
• 文字内容列在lg断点下跨7列，对应70%宽度
• 评论区始终跨整行，适配所有断点下的通栏展示

完整实现代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css" rel="stylesheet"/>
<div class="bg-blue-400 text-blue-400 min-h-screen flex items-center justify-center">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-10 gap-2 px-2">
    
    <div class="col-span-1 sm:col-span-1 lg:col-span-3 bg-white p-5 rounded text-center">
      <img class="w-full object-cover object-center" src="https://via.placeholder.com/500x666" alt="产品图">
    </div>

    <div class="col-span-1 sm:col-span-1 lg:col-span-7 bg-white p-10 rounded ">
      <h1 class="uppercase text-3xl">Title</h1>
      <h3 class="uppercase text-md">Subtitle</h3>      
      <div class="leading-10">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia, quae. Exercitationem, aspernatur cupiditate reiciendis veniam fugiat rerum officia dolor accusantium ipsam cum provident eum voluptatum numquam consequatur! Consectetur, quos rem. 
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia, quae. Exercitationem, aspernatur cupiditate reiciendis veniam fugiat rerum officia dolor accusantium ipsam cum provident eum voluptatum numquam consequatur! Consectetur, quos rem.
      </div>
    </div>

    <div class="col-span-1 sm:col-span-2 lg:col-span-10 bg-white p-10 rounded">
        comments
    </div>

  </div>
</div>

内容的提问来源于stack exchange，提问作者Maik Lowrey