Tailwind 中网格布局中的元素居中

Question

我正在努力获得以 Tailwind 为中心的网格布局。这是一个例子

    <div class="grid grid-cols-6 p-24 justify-center bg-slate-500">
        <div class="w-full p-8 col-span-2 justify-center justify-self-center mx-auto bg-slate-900 text-white text-center text-lg">
            2 cols, should be centered
        </div>
    </div>

看起来是这样的：

当然，我可以添加 col-start-2 然后它会居中，但是网格来自动态布局，我不知道是否有更多元素出现在同一行上。我尝试过 justify-center、justify-self-center、mx-auto，也尝试过 no-float，但没有任何效果。

有人有什么想法吗？

Answer 1

你可以这样做：

      <div class="grid grid-cols-[repeat(auto-fit,_16.666666%)] m-auto p-24 justify-center bg-slate-500">
        <div class="w-full p-8 col-span-2 justify-center justify-self-center mx-auto bg-slate-900 text-white text-center text-lg">
          2 cols, should be centered
        </div>
      </div>

您可能希望将其指定repeat(auto-fit, 16.666666%)为主题的一部分。

您可能还需要考虑当有超过三个项目时您到底想要发生什么 - 如果您需要第五个也是最后一个元素也居中，那么也许弹性盒会更好地为您服务。