如何缩小TailwindCSS Grid中统计项与数值的间距

方法1：改用自适应列宽的Grid布局 #

放弃固定的grid-cols-2，让列宽根据内容自动调整，再通过gap类精准控制间距：

<script src="https://cdn.tailwindcss.com"></script>

<div class="card-content">
    <div class="stat grid grid-auto-flow-col gap-2 mb-4">
        <p class="text-gray-700 font-semibold">Total:</p>
        <p class="text-black">20</p>
    </div>
    <div class="stat grid grid-auto-flow-col gap-2 mb-4">
        <p class="text-green-500 font-semibold">Easy:</p>
        <p class="text-black">20</p>
    </div>
    <div class="stat grid grid-auto-flow-col gap-2 mb-4">
        <p class="text-yellow-400 font-semibold">Medium:</p>
        <p class="text-black">20</p>
    </div>
    <div class="stat grid grid-auto-flow-col gap-2 mb-4">
        <p class="text-red-500 font-semibold">Hard:</p>
        <p class="text-black">20</p>
    </div>
</div>

可根据需求调整gap-2为更小的间距，比如gap-1甚至gap-0。

方法2：使用Flex布局（更适配行内对齐场景） #

Flex布局在处理这类横向元素对齐时更灵活，同样通过gap控制间距：

<script src="https://cdn.tailwindcss.com"></script>

<div class="card-content">
    <div class="stat flex gap-2 mb-4">
        <p class="text-gray-700 font-semibold">Total:</p>
        <p class="text-black">20</p>
    </div>
    <div class="stat flex gap-2 mb-4">
        <p class="text-green-500 font-semibold">Easy:</p>
        <p class="text-black">20</p>
    </div>
    <div class="stat flex gap-2 mb-4">
        <p class="text-yellow-400 font-semibold">Medium:</p>
        <p class="text-black">20</p>
    </div>
    <div class="stat flex gap-2 mb-4">
        <p class="text-red-500 font-semibold">Hard:</p>
        <p class="text-black">20</p>
    </div>
</div>

方法3：保留Grid结构并自定义列宽 #

如果坚持使用Grid的分栏结构，可让第一列宽度适配内容，第二列占剩余空间，同时控制列间距：

<script src="https://cdn.tailwindcss.com"></script>

<div class="card-content">
    <div class="stat grid grid-cols-[auto_1fr] gap-2 mb-4">
        <p class="text-gray-700 font-semibold">Total:</p>
        <p class="text-black">20</p>
    </div>
    <div class="stat grid grid-cols-[auto_1fr] gap-2 mb-4">
        <p class="text-green-500 font-semibold">Easy:</p>
        <p class="text-black">20</p>
    </div>
    <div class="stat grid grid-cols-[auto_1fr] gap-2 mb-4">
        <p class="text-yellow-400 font-semibold">Medium:</p>
        <p class="text-black">20</p>
    </div>
    <div class="stat grid grid-cols-[auto_1fr] gap-2 mb-4">
        <p class="text-red-500 font-semibold">Hard:</p>
        <p class="text-black">20</p>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Praveen Kumar