Comment centrer la dernière ligne d'éléments dans une grille à l'aide de Tailwind CSS ?
P粉311563823
2023-08-28 20:06:09
<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>
Vous pouvez envisager de l'utiliser
flex
、flex-wrap
、justify-center
7 articles :
Sortie :
8 articles :
Utilisez tailwind-css Playground