TailwindCSS：如何制作具有不同比例的响应式网格？

Question

我需要你的建议。我正在做一个简单的页面设计来显示产品文章。我为此使用 TailwindCSS。 （Tailwind 是非常酷的工具！）。 这是我的问题：如何制作具有不同比率的响应式网格？

对于断点前缀 sm 和 md，页面宽度应为 50% 到 50%。但是对于断点前缀 lg，纵横比应该是 ~30% 到 ~70%。而在sm断点下，要显示两行。

这是我当前的代码。感谢您的支持！

<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-2 gap-2 px-2">
    
    <div class="col-span-2 sm:col-span-1 bg-white p-5 rounded text-center">
      <img class="w-full object-cover object-center" src="https://via.placeholder.com/500x666">
    </div>

    <div class="col-span-2 sm:col-span-1 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-2 bg-white p-10 rounded">
        comments
    </div>


  </div>
</div>

这是 Tailwind Play 的在线编辑链接： https://play.tailwindcss.com/gPFDif7RKx

Answer 1

您需要使用 10 列网格布局 grid-cols-10 而不是 grid-cols-2。

50% 到 50% --> col-span-5 + col-span-5

30% 到 70% --> col-span-3 + col-span-7

下断点sm --> grid-cols-1 sm:grid-cols-10