justify-content property not aligning content on main-axis on Grid

Question

I'm using tailwind for CSS. I have a simple div that has 3 children.

I want them to have space between them in the main-axis. Here's my whole code:

<div className="grid grid-cols-12 text-white justify-between">
  <div className='col-span-5'>COL_SPAN_5</div>
  <div className='col-span-3'>COL_SPAN_3</div>
  <div className='col-span-3'>COL_SPAN_3</div>
</div>

But it is not working. The items in the grid don't move.

I tried using the justify-items-center property to see if anything changes. It works.

Using justify-between or any justify-content property doesn't work.

It's also not working in vanilla CSS. Here's the working example: https://codepen.io/anas-ansari/pen/xxparoM

I know that it can be fixed by adding gap-{n} but it I want space in between (not around in any case).

My question is why can't I apply justify-content even when I have seen (I think) some examples using justify-content on grid?

Can you please help me?

Answer 1

You can use any of the two property gap-4 or space-x-4.

 <script src="https://cdn.tailwindcss.com"></script>

<!-- using gap property -->
<div class="grid grid-cols-12 text-black bg-red-100 space-x-10 mb-10">
  <div class='col-span-5 bg-red-300'>COL_SPAN_5</div>
  <div class='col-span-3 bg-green-300'>COL_SPAN_3</div>
  <div class='col-span-3 bg-blue-300'>COL_SPAN_3</div>
</div>

<!-- using space-x property -->
<div class="grid grid-cols-12 text-black bg-red-100 gap-10 ">
  <div class='col-span-5 bg-red-300'>COL_SPAN_5</div>
  <div class='col-span-3 bg-green-300'>COL_SPAN_3</div>
  <div class='col-span-3 bg-blue-300'>COL_SPAN_3</div>
</div>

Answer 2

If you want space around the items like: item1 <space> item2 <space> item3. You can add the css property (for example: gap:20px;) to your .container class. In Tailwind the class named gap-{n} (for example: gap-4).

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="grid grid-cols-12  justify-between gap-4">
  <div class='col-span-5 bg-yellow-400'>COL_SPAN_5</div>
  <div class='col-span-3 bg-green-400'>COL_SPAN_3</div>
  <div class='col-span-3 bg-red-300'>COL_SPAN_3</div>
</div>

Answer 3

Try to put gap-4 or gap-6

<div className="grid grid-cols-12 text-white justify-between gap-4">
  <div className='col-span-5'>COL_SPAN_5</div>
  <div className='col-span-3'>COL_SPAN_3</div>
  <div className='col-span-3'>COL_SPAN_3</div>
</div>