基础到顺风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。。。他们的柔性被称为网格。重新创建您在Foundation中共享的示例将类似于Tailwind中的Play示例。https://play.tailwindcss.com/l6NYNTwPH2其中弯曲儿童具有1/3的宽度。

然而，从您的代码示例来看，您似乎正在寻找2行3列居中的代码。在Tailwind中，你需要将每组3个包裹在自己的div中，如果你想让它们水平和垂直居中，最好将flex子对象的宽度降低到1/4，因为在1/3时，它将达到全宽。这是一个例子https://play.tailwindcss.com/kjfzlD2SA7

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