如何使用Tailwind CSS將網格中最後一行的項目置中?
P粉311563823
2023-08-28 20:06:09
<p>嘗試使用 Tailwind(使用 React)在網格佈局中對齊我的最終專案時遇到問題。基本上我想要 3 個項目,如果沒有剩下 3 個項目,即 2 或 1,我希望它們居中。 </p>
<p>我嘗試了某種 col span,但沒有按預期工作。 </p>
<p>為了更好地說明我正在嘗試做的事情,我附上了一些圖表</p>
<p>目前佈局:</p>
<p>所需的佈局,其中剩餘 2 個項目:</p>
<p>所需的佈局,其中剩餘 1 項:</p>
<pre class="brush:html;toolbar:false;"><div className="xl:grid grid-cols-3 gap-4">
//cards .map(item)
</div>
</pre></p>
可以考慮使用
flex
、flex-wrap
、justify-center
#7 項:
#輸出:
#8 項目:
#使用tailwind-css Playground