如何使用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