Tailwind CSS 的基础：网格项目的中心对齐？

Question

如何在 Tailwind 中使网格项目居中对齐，就像我们可以在 Foundation 中那样？

基金会：

<div class="grid-x grid-padding-x align-center-middle text-center" style="height: 200px;">
  <div class="cell small-4">I am in the center-middle</div>
  <div class="cell small-4">I am also centrally located</div>
</div>

在 Tailwind CSS 中呢？在下面的代码中，我还应该从 TW 中使用什么？

  <div class="grid grid-cols-3 gap-4">
    <div class="bg-green-500">1</div>
    <div class="bg-green-500">2</div>
    <div class="bg-green-500">3</div>
    <div class="bg-green-500">4</div>
    <div class="bg-green-500">5</div>
  </div>

Answer 1

Foundation 示例使用的是 flex，而不是 grid...他们的 flex 只是称为 grid。重新创建您从 Foundation 共享的示例将类似于 Tailwind 中的 Play 示例。 https://play.tailwindcss.com/l6NYNTwPH2 flex 子节点的宽度为 1/3。

但是，从您的代码示例看来，您正在寻找居中的 2 行 3 列。在 Tailwind 中，您需要将每组 3 个包装在它自己的 div 中，如果您希望它们水平居中和垂直居中，则最好将 flex 子项的宽度降至 1/4，因为在 1/3 时它将变为全宽。这是https://play.tailwindcss.com/kjfzlD2SA7的一个示例

当然，与 CSS 一样，还有许多其他解决方案可以解决这个问题，但这个与您在 Foundation 中分享的类似。