Why isn't justify-items-center not being applied here?

I want my grid items to start from the center instead of from the left. So I used justify-items-center:

<div class="bg-gray-100 grid grid-cols-4 justify-items-center gap-2 rounded p-3 md:grid-cols-8">
  <div class="aspect-w-1 aspect-h-1 border-border group relative w-full overflow-hidden rounded border pb-7">
    <button class="bg-foreground text-background hover:shadow-dark absolute right-1 top-1 z-10 rounded-full p-1 opacity-0 shadow transition-opacity duration-200 group-hover:opacity-100">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-x">
        <path d="M18 6l-12 12"></path>
        <path d="M6 6l12 12"></path>
      </svg></button
    ><img src="https://via.placeholder.com/150" alt="Preview 1" class="h-full w-full object-contain" />
    <div class="border-border bg-background absolute bottom-0 flex h-7 w-full items-center justify-center gap-2 overflow-hidden border-t p-2 text-xs"><span class="truncate text-ellipsis whitespace-nowrap">placeholder1.jpg</span></div>
  </div>
  <div class="aspect-w-1 aspect-h-1 border-border group relative w-full overflow-hidden rounded border pb-7">
    <button class="bg-foreground text-background hover:shadow-dark absolute right-1 top-1 z-10 rounded-full p-1 opacity-0 shadow transition-opacity duration-200 group-hover:opacity-100">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-x">
        <path d="M18 6l-12 12"></path>
        <path d="M6 6l12 12"></path>
      </svg></button
    ><img src="https://via.placeholder.com/200" alt="Preview 2" class="h-full w-full object-contain" />
    <div class="border-border bg-background absolute bottom-0 flex h-7 w-full items-center justify-center gap-2 overflow-hidden border-t p-2 text-xs"><span class="truncate text-ellipsis whitespace-nowrap">placeholder2.png</span></div>
  </div>
</div>

https://play.tailwindcss.com/c8UlMODGNC

However, the items are still starting from the left:

What am I doing wrong?

Note: I also tried place-content-center. No luck.

You need to sign in to view this answers