Search code examples
cssgridtailwind-css

justify-between not working properly for containers within grid (Tailwind)

Within my Modal I've a Grid system. When the media query is less than xl in Tailwind then elements are not properly placed. justify-center kinda works, but then there is gap left and right. With justify-between it is only aligned on the left side. How can i align it left and right and between space?

<div class="fixed inset-0 flex items-center justify-center">
  <div class="min-w-[90%] xl:min-w-[1000px] h-[600px] bg-nf-500">
    <div class="text-primary-500 text-center mt-6 font-semibold text-3xl">Modal</div>
    <div class="pt-12 mx-4 h-full xl:flex">
      <div class="grid md:grid-cols-3 grid-cols-2 gap-4 gap-y-4 xl:h-48">
        <div class="flex justify-between" *ngFor="let item of [1, 2, 3, 4, 5, 6]">
          <div class=" rounded-md border-2 border-primary-500 h-24 w-48"></div>
        </div>
      </div>
      <div class="w-full xl:w-[350px] h-20 xl:h-[80%] xl:mt-0 mt-5 pt-5 xl:pt-0 xl:ml-4 ml-0 xl:pl-4 pl-0 border-t-2 xl:border-l-2 xl:border-t-0 border-neutral-500">
        <div class="bg-blue-200 w-full h-full"></div>
      </div>
    </div>
  </div>
</div>

justify-between is not aligned on the right side:

justify-between is not aligned on the right side.

Solution

  • Consider adjusting the grid column track sizing such that they are only as wide as the content. This then gives free space where the effect of justify-content can be observed. Apply justify-content: space-between to the grid element (not the children) by applying the justify-between class to the grid parent element:

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

<div class="fixed inset-0 flex items-center justify-center">
  <div class="min-w-[90%] xl:min-w-[1000px] h-[600px] bg-nf-500">
    <div class="text-primary-500 text-center mt-6 font-semibold text-3xl">Modal</div>
    <div class="pt-12 mx-4 h-full xl:flex">
      <div class="grid md:grid-cols-[repeat(3,max-content)] grid-cols-[repeat(2,max-content)] gap-4 gap-y-4 justify-between xl:h-48">
        <div class="flex justify-between">
          <div class=" rounded-md border-2 border-primary-500 h-24 w-48"></div>
        </div>
        <div class="flex justify-between">
          <div class=" rounded-md border-2 border-primary-500 h-24 w-48"></div>
        </div>
        <div class="flex justify-between">
          <div class=" rounded-md border-2 border-primary-500 h-24 w-48"></div>
        </div>
        <div class="flex justify-between">
          <div class=" rounded-md border-2 border-primary-500 h-24 w-48"></div>
        </div>
        <div class="flex justify-between">
          <div class=" rounded-md border-2 border-primary-500 h-24 w-48"></div>
        </div>
        <div class="flex justify-between">
          <div class=" rounded-md border-2 border-primary-500 h-24 w-48"></div>
        </div>
      </div>
      <div class="w-full xl:w-[350px] h-20 xl:h-[80%] xl:mt-0 mt-5 pt-5 xl:pt-0 xl:ml-4 ml-0 xl:pl-4 pl-0 border-t-2 xl:border-l-2 xl:border-t-0 border-neutral-500">
        <div class="bg-blue-200 w-full h-full"></div>
      </div>
    </div>
  </div>
</div>