如何使用 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进行游戏