Tailwind：space-*-* 类弄乱了我的整个设计？

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>

Playground