Wie zentriere ich die letzte Elementreihe in einem Raster mit Tailwind CSS?
P粉311563823
2023-08-28 20:06:09
<p>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. </p>
<p>Ich habe es mit einer Art Spaltenspanne versucht, aber es hat nicht wie erwartet funktioniert. </p>
<p>Um besser zu veranschaulichen, was ich zu tun versuche, habe ich einige Diagramme angehängt</p>
<p>Aktuelles Layout: </p>
<p>Gewünschtes Layout mit noch 2 verbleibenden Elementen: </p>
<p>Gewünschtes Layout, 1 Element übrig: </p>
<pre class="brush:html;toolbar:false;"><div className="xl:grid grid-cols-3 gap-4">
//Karten .map(item)
</div>
</pre></p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
可以考虑使用
flex、flex-wrap、justify-center7 项：
输出：
8 项：
使用tailwind-css Playground