Why is place-items-center not working in my grid when using TailwindCSS?

Playing with grids using TailwindCSS I'm trying to center any orphans for md set at 2 column than lg set at 3 column. After reading:

I thought my code would work:

const DUMMY_TESTIMONIAL = [
  {
    body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
    author: {
      name: 'Leslie Alexander',
      handle: 'lesliealexander',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
  {
    body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
    author: {
      name: 'Leslie Alexander',
      handle: 'lesliealexander',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
  {
    body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
    author: {
      name: 'Leslie Alexander',
      handle: 'lesliealexander',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
  {
    body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
    author: {
      name: 'Leslie Alexander',
      handle: 'lesliealexander',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
]

<Fragment>
  <div className="mx-auto max-w-screen-xl px-6">
    {/* stripped code */}
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 place-items-center bg-yellow-200 ">
      {DUMMY_TESTIMONIAL.map(testimonial => (
        <div key={testimonial?.author?.handle} className="col-span-1">
          <figure className="rounded-2xl bg-gray-50 p-6 text-sm leading-6">
            <blockquote className="text-gray-900">
              <p>{`“${testimonial?.body}”`}</p>
            </blockquote>
            <figcaption className="mt-6 flex items-center gap-x-4">
              <div className="relative w-10 h-10 bg-gray-100 rounded-full">
                <svg
                  className="absolute w-12 h-12 text-gray-400 -left-1"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fillRule="evenodd"
                    d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                    clipRule="evenodd"
                  ></path>
                </svg>
              </div>
              <div>
                <div className="font-semibold text-gray-900">{testimonial?.author?.name}</div>
                <div className="text-gray-600">{`@${testimonial?.author?.handle}`}</div>
              </div>
            </figcaption>
          </figure>
        </div>
      ))}
    </div>
  </div>
</Fragment>

Research

What am I misunderstanding with place-items-center?

Solution

place-items-center applies place-items: center. I presume you are referring to the horizontal placement of the last element, thus we will evaluate the justify-items: center value applied by the aforementioned place-items: center. On MDN, it states:

In grid layouts, it aligns the items inside their grid areas on the inline axis (more about alignment in grid layouts)

In this prose, "grid areas" means the grid column track. Since the elements are the width of the grid column tracks themselves, there is no discernable effect. Here's an alternative example that demonstrates the inline axis effect of place-items: center/justify-items: center:

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

<div class="grid place-items-start grid-cols-3 gap-2">
  <div class="bg-red-500 h-20 w-1/2"></div>
  <div class="bg-red-500 h-20 w-1/2"></div>
  <div class="bg-red-500 h-20 w-1/2"></div>
  <div class="bg-red-500 h-20 w-1/2"></div>
</div>

<div class="grid place-items-center grid-cols-3 gap-2 mt-10">
  <div class="bg-red-500 h-20 w-1/2"></div>
  <div class="bg-red-500 h-20 w-1/2"></div>
  <div class="bg-red-500 h-20 w-1/2"></div>
  <div class="bg-red-500 h-20 w-1/2"></div>
</div>

So, to have the orphan testimonial be centered in the grid, you'd want to manually adjust the grid column track it occupies by setting grid-column-start: 2:

const DUMMY_TESTIMONIAL = [
  {
    body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
    author: {
      name: 'Leslie Alexander',
      handle: 'lesliealexander',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
  {
    body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
    author: {
      name: 'Leslie Alexander',
      handle: 'lesliealexander',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
  {
    body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
    author: {
      name: 'Leslie Alexander',
      handle: 'lesliealexander',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
  {
    body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
    author: {
      name: 'Leslie Alexander',
      handle: 'lesliealexander',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
]

ReactDOM.createRoot(document.getElementById('app')).render(
  <React.Fragment>
    <div className="mx-auto max-w-screen-xl px-6">
      {/* stripped code */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 place-items-center bg-yellow-200 ">
        {DUMMY_TESTIMONIAL.map(testimonial => (
          <div key={testimonial.author.handle} className="col-span-1 lg:last:col-start-2">
            <figure className="rounded-2xl bg-gray-50 p-6 text-sm leading-6">
              <blockquote className="text-gray-900">
                <p>{`“${testimonial.body}”`}</p>
              </blockquote>
              <figcaption className="mt-6 flex items-center gap-x-4">
                <div className="relative w-10 h-10 bg-gray-100 rounded-full">
                  <svg
                    className="absolute w-12 h-12 text-gray-400 -left-1"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                      clipRule="evenodd"
                    ></path>
                  </svg>
                </div>
                <div>
                  <div className="font-semibold text-gray-900">{testimonial.author.name}</div>
                  <div className="text-gray-600">{`@${testimonial.author.handle}`}</div>
                </div>
              </figcaption>
            </figure>
          </div>
        ))}
      </div>
    </div>
  </React.Fragment>
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div id="app"></div>