Foundation to 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 分享的解决方案类似。

Foundation to Tailwind CSS：网格项目的中心对齐？

Foundation to Tailwind CSS: central alignment for grid items?

css

zurb-foundation

tailwind-css