我需要你的建议。我正在设计一个简单的页面设计来显示产品文章。我为此使用 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
您需要使用 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
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句