Comment centrer la dernière ligne d'éléments dans une grille à l'aide de Tailwind CSS ?

Question

J'ai du mal à essayer d'utiliser Tailwind (en utilisant React) pour aligner mon projet final dans une disposition en grille. En gros, je veux 3 éléments et s'il n'en reste plus 3, c'est-à-dire 2 ou 1, je veux qu'ils soient centrés.

J'ai essayé une sorte de col span mais cela n'a pas fonctionné comme prévu.

Pour mieux illustrer ce que j'essaie de faire, j'ai joint quelques diagrammes

Mise en page actuelle :

Mise en page souhaitée avec 2 éléments restants :

Mise en page souhaitée, 1 élément restant :

<div className="xl:grid grille-cols-3 écart-4">
 //cartes .map(élément)
</div>

Answer 1

Vous pouvez envisager de l'utiliserflex、flex-wrap、justify-center

7 articles :

<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>

Sortie :

8 articles :

<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>

Utilisez tailwind-css Playground