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>

这里是 link 到 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

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

TailwindCSS: How do I make a responsive grid with different ratios?

css

css-grid

tailwind-css