如何使用Tailwind CSS将网格中最后一行的项目居中？

Question

尝试使用 Tailwind（使用 React）在网格布局中对齐我的最终项目时遇到问题。基本上我想要 3 个项目，如果没有剩下 3 个项目，即 2 或 1，我希望它们居中。

我尝试了某种 col span，但没有按预期工作。

为了更好地说明我正在尝试做的事情，我附上了一些图表

当前布局：

所需的布局，其中剩余 2 个项目：

所需的布局，其中剩余 1 项：

<div className="xl:grid grid-cols-3 gap-4">
 //cards .map(item) 
</div>

Answer 1

可以考虑使用flex、flex-wrap、justify-center

7 项：

<div class="flex flex-wrap justify-center gap-2">
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
</div>

输出：

8 项：

<div class="flex flex-wrap justify-center gap-2">
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
  <div class="h-40 w-60 bg-cyan-200"></div>
</div>

使用tailwind-css Playground