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

问题描述

如何像在 Foundation 中那样在 Tailwind 中使网格项居中对齐？

基础：

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

解决方法

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

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

的一个例子

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