Tailwind Grid, why are my elements rendering horizontally?

Skrrubs 0
Viewed 19
<div className='grid grid-cols-12 gap-12 mb-8'>
      <div className='col-span-8'>
        <div className='box'></div>
      </div>
      <div className='col-span-4'>
        <div className='box'></div>
      </div>
</div>

Above is the HTML code that I am using along with the Tailwind CSS library, this is the output that I am getting.

Output of HTML COde Shouldn't the elements render side by side, taking up the whole grid, as one has to take up 8 slots and the other one 4, which adds up to 12? I don't know why the elements are being rendered above the other.

The CSS class box is just:

.box{
  background-color: #2b2d40;
  height: 100px;
  width: auto;
}

So finally my question is, how do I make it so that they are side by side in the same row, as that was the original output that I was expecting?

Thanks in Advance!

tailwind-ui next.js tailwind-css css
1 Answers

I feel your pain on this topic. I find it to be much more reliable to use the col-start-{n} and col-end-{n} classes with tailwind grids. Try using these classes instead

<div className='grid grid-cols-12 gap-12 mb-8'>
    <div className='col-start-1 col-end-8'>
        <div className='box'></div>
    </div>
    <div className='col-start-8 col-end-13'>
        <div className='box'></div>
    </div>
</div>

The col-8's might have to be 9's I cant remember off the top of my head

JDawwgy0
Related