Comment centrer la dernière ligne d'éléments dans une grille à l'aide de Tailwind CSS ?
P粉311563823
P粉311563823 2023-08-28 20:06:09
0
1
461
<p>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. </p> <p>J'ai essayé une sorte de col span mais cela n'a pas fonctionné comme prévu. </p> <p>Pour mieux illustrer ce que j'essaie de faire, j'ai joint quelques diagrammes</p> <p>Mise en page actuelle : </p> <p>Mise en page souhaitée avec 2 éléments restants : </p> <p>Mise en page souhaitée, 1 élément restant : </p> <pre class="brush:html;toolbar:false;"><div className="xl:grid grille-cols-3 écart-4"> //cartes .map(élément) </div> </pre></p>
P粉311563823
P粉311563823

répondre à tous(1)
P粉187677012

Vous pouvez envisager de l'utiliserflexflex-wrapjustify-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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal