Search code examples
cssgridtailwind-css

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

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

grid-col-3

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 grid-cols-6

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>