顺风:空间-*-*类搞乱了我的整个设计?

Question

我已经用盒子创建了一个非常基本的网格系统，但是当我在这些列x和y之间添加间距时，它会破坏整个设计，使它看起来很糟糕?

的例子:https://play.tailwindcss.com/9YYAgzmasH

糟糕的意思是它在第一个项目中添加了第二行，弄乱了与其他盒子高度的对齐，现在似乎已经弄乱了宽度，第2和第3个项目比第一个项目更宽?

Answer 1

不要用space类，试试用gap类。

最终代码:

<div class="p-12 bg-blue-600 h-screen">
<div class="grid grid-cols-2 gap-y-10 gap-x-6">
<div class="bg-white p-5 rounded shadow">
<h1>Item 1</h1>
</div>
<div class="bg-white p-5 rounded shadow">
<h1>Item 2</h1>
</div>
<div class="bg-white p-5 rounded shadow">
<h1>Item 3</h1>
</div>
</div>
</div>

游乐场