CODEWITHSUNDEEP
csscss-gridtailwind-css
Maik Lowrey
Maik Lowrey

Reputation: 17566

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

I need your advice. I am working on a simple page design for displaying a product article. I am using TailwindCSS for this. (Tailwind is very cool tool!). Here is my question: How do I make a responsive grid with different ratios?

For the breakpoint prefixes sm and md the page width should be 50% to 50%. But for the breakpoint prefix lg the aspect ratio should be ~30% to ~70%. And under the breakpoint sm, two lines are to be displayed.

Here is my current code. Thanks for your support!

<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>

Here is the link to the Tailwind Play to edit it online: https://play.tailwindcss.com/gPFDif7RKx

Upvotes: 3

Views: 3100

Answers (1)

zafer onay
zafer onay

Reputation: 1783

You need to use 10 column grid layout grid-cols-10 instead of grid-cols-2.

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

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

under the breakpoint sm --> grid-cols-1 sm:grid-cols-10

Upvotes: 3

Related Questions