主页 / coding / 问题 / 78914963
Accepted
GʀᴜᴍᴘʏCᴀᴛ
Asked: 2024-08-26 22:29:12 +0800 CST

为什么使用 TailwindCSS 时 place-items-center 在我的网格中不起作用？

  • 772

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

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

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>

研究

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

grid

1 个回答

  1. Best Answer

    place-items-center适用place-items: center。我假设你指的是最后一个元素的水平位置，因此我们将评估justify-items: center上述所应用的值place-items: center。在 MDN 上，它指出：

    • 在网格布局中，它将网格区域内的项目沿内联轴对齐（有关网格布局中的对齐的更多信息）

    在本文中，“网格区域”指的是网格列轨道。由于元素是网格列轨道本身的宽度，因此没有明显的效果。下面是另一个示例，演示了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>

    因此，要使孤立的推荐信位于网格的中心，您需要通过设置来手动调整它所占据的网格列轨道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>

    • 0

相关问题