Tailwind CSS grid gives 3 rows instead of 3 cols but works with grid-cols-6 only

Issue

I wanted to have 1 row and 3 columns inside it. So I have created 3 divs inside a grid div which has a class of "grid-cols-3" but I got 3 raws and 1 column instead.

<div class="grid grid-cols-3">
    <div> Col 1 </div>
    <div> Col 2 </div>
    <div> Col 3 </div>
</div>

Then I got

But when I have changed the "grid-col-3" to "grid-col-6" it worked!

    <div class="grid grid-cols-6">
      <div> Col 1 </div>
      <div> Col 2 </div>
      <div> Col 3 </div>
   </div>

Then I got

I'm self-taught and do not have any great mentors. I know how to do it using CSS like "grid-template" but I'm using tailwind for faster deployment with Laravel and Livewire.

Solution

If you test your code in Tailwind Play you will notice that works fine (as expected), so there might be some CSS that override this class: grid-cols-3. You should check that.

However I had a similar issue with Laravel Livewire I checked the built in css files and I noticed there is this class defined: .md\:grid-cols-3 so in my case this worked out:

<div class="grid md:grid-cols-3">
    <div> Col 1 </div>
    <div> Col 2 </div>
    <div> Col 3 </div>
</div>

Answered By - Gustavo Martínez