问题[grid](coding)

使用 TailwindCSS 玩转网格 我尝试将所有孤立元素居中，将其md设置为 2 列，而不是lg3 列。阅读后：

• 在 Tailwind 中将元素置于网格布局的中心
• 中心

我以为我的代码可以工作：

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>

研究

• 如何使用 Tailwind CSS 将项目置于网格最后一行的中心？[重复]
• 如何将元素置于 CSS Grid 的最后一行中央？
• Tailwind CSS 的基础：网格项的中心对齐？
• 如何将元素置于 CSS Grid 的最后一行中央？
• item-center 在 tailwindcss 和 NextJS 中不起作用

我误解了什么place-items-center？