Center children in a grid that don't fit column

Issue

I am using Tailwind and I have a grid layout and I want children that don't fit the column to be centered. I've tried justify-items-center and place-items-center but neither do anything.

e.g. In this example I want the bottom two to be centered.

Solution

I will start by first replacing the grid with a flex instead because grid is not suited for alignment across an entire row. A detailed explanation can be found here.

With that said, this is my suggested solution using flex.

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

<div class="my-12 flex flex-wrap justify-center gap-4">
  <div class="h-64 w-48 rounded-md bg-black"></div>
  <div class="h-64 w-48 rounded-md bg-black"></div>
  <div class="h-64 w-48 rounded-md bg-black"></div>
  <div class="h-64 w-48 rounded-md bg-black"></div>
  <div class="h-64 w-48 rounded-md bg-black"></div>
</div>

Answered By - AmehPls