I've implemented tailwind for my CSS styling.
Within a simple div, I have 3 child elements.
My goal is to create space between them along the main axis. Here's the code snippet in question:
<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>
Unfortunately, this setup isn't producing the desired result as the items within the grid remain stationary.
Experimenting with the justify-items-center property yielded positive results, indicating that it works.
However, attempts to utilize justify-between or other justify-content properties prove ineffective.
This issue persists even when reverting to vanilla CSS.
You can explore a functioning example here: https://codepen.io/anas-ansari/pen/xxparoM
While aware that a solution is achievable through inserting gap-{n}, I specifically seek spacing between elements (not around them).
The primary query remains - why am I unable to apply justify-content, especially considering instances where this property was successfully used on a grid layout?
Your assistance in resolving this matter would be greatly appreciated.