Wie zentriere ich die letzte Elementreihe in einem Raster mit Tailwind CSS?

Question

Ich habe Probleme beim Versuch, Tailwind (mit React) zu verwenden, um mein endgültiges Projekt in einem Rasterlayout auszurichten. Grundsätzlich möchte ich 3 Elemente und wenn keine 3 Elemente übrig sind, also 2 oder 1, möchte ich, dass sie zentriert sind.

Ich habe es mit einer Art Spaltenspanne versucht, aber es hat nicht wie erwartet funktioniert.

Um besser zu veranschaulichen, was ich zu tun versuche, habe ich einige Diagramme angehängt

Aktuelles Layout:

Gewünschtes Layout mit noch 2 verbleibenden Elementen:

Gewünschtes Layout, 1 Element übrig:

<div className="xl:grid grid-cols-3 gap-4">
 //Karten .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