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?
CodePudding user response:
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>
CodePudding user response:
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 >
<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>