如何使用Tailwind CSS將網格中最後一行的項目置中?
P粉311563823
P粉311563823 2023-08-28 20:06:09
0
1
467
<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>
P粉311563823
P粉311563823

全部回覆(1)
P粉187677012

可以考慮使用flexflex-wrapjustify-center

#7 項:

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

輸出:

#8 項目:

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

使用tailwind-css Playground

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板