grid grid-cols-[20%, 40%, 40%]

[kishore-uc]

I want custom grid layout with 3 different grid col sizes, so I made 3col grid with 20%, 40%, 40%. but it did not work, any reason why it not working in tailwind.
I am using angular flowbite and tailwind.

First Item (20%)

Second Item (40%)

Third Item (40%)

In "https://play.tailwindcss.com/" also I have added the above html grid structure it also gives same

[wongjn]

You'd have the column track size values of grid-cols- separated by spaces escaped as underscores like grid-cols-[20%_40%_40%].

[kishore-uc]

It works well, Thank you so much @wongjn for your response.
same way, How to make 12 grid system in tailwind like bootstrap
eg of bootstrap

text

text

text

but col need to be exactly divided container is 1440px first col is 354px second col is 614px third col is 472px some padding will be there between 3 cols ignore it for now.

[wongjn]

You could consider using a CSS grid with a custom grid-cols-*, similar to what you have tried in your original question, along with applying other CSS properties to achieve your desired layout.

[kishore-uc]

thank you for your reply,
you mean like this ?

First Item

Second Item

Third Item

, I tried it wont work, and also we need exact size of the columns, which will help us a lot,

[wongjn]

Not like that – you need to use HTML to apply Tailwind classes like:

<div class="…">
  <div class="…">First Item</div>
  <div class="…">Second Item</div>
  <div class="…">Third Item</div>
</div>

For exact column sizes, you could apply CSS properties that give you the exact sizings.