如何使用Tailwind CSS将网格最后一行的项目居中？[重复]

mwecs4sa 于 2023-04-08 发布在其他

关注(0)|答案(1)|浏览(98)

此问题已在此处有答案：

How to center elements on the last row in CSS Grid?（9个回答）
7天前关闭
尝试使用Tailwind（使用React）在网格布局中对齐我的最终项目时遇到了麻烦。基本上，我希望有3个项目，如果没有3个项目，即2或1，我希望它们居中。
我已经尝试了一些类型的col span，但没有按预期工作。
为了更好地说明我试图做我附上了一些图表
当前布局：

剩余2项的所需布局：

剩余1项的所需布局：

<div className="xl:grid grid-cols-3 gap-4">
 //cards .map(item) 
</div>

css

来源：https://stackoverflow.com/questions/75895204/how-to-centre-the-items-in-the-last-row-of-a-grid-using-tailwind-css

1条答案

按热度按时间

s8vozzvw1#

您可以考虑使用flex、flex-wrap、justify-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

赞(0）回复(0）举报 2023-04-08

我来回答

如何使用Tailwind CSS将网格最后一行的项目居中？[重复]

1条答案

相关问题

热门标签

最新问答