如何使用Tailwind CSS消除网格项间的幽灵空白？

如图所示，第二个网格项与第五个网格项之间存在幽灵空白，我想找到用Tailwind CSS解决该问题的方案。我的代码如下：

<div className='grid grid-cols-3 grid-rows-3 grid-flow-dense gap-4 mt-10'>
  {skills.map((skill, idx) => {
    return (
      <div
        key={idx}
        className='flex flex-col col-span-1 h-fit items-center justify-center gap-3 bg-white px-6 py-4 rounded-xl'>
        <h4 className='font-bold text-xl'>{skill.title}</h4>
        <div className='flex flex-wrap gap-2'>
          {skill.tags.map((tag, idx) => (
            <p
              key={idx}
              className='flex-grow text-[16px] border-[1px] px-2 py-2 border-spacing-2 border-black  mr-2'>
              {tag}
            </p>
          ))}
        </div>
      </div>
    );
  })}
</div>

我试过用grid-flow-dense，但没解决问题。

问题根源 #

这种幽灵空白主要是因为网格项高度不一致，再加上固定的grid-rows-3限制，导致网格布局无法自动适配内容填充空白。grid-flow-dense只能填充项跨列/跨行留下的空白，对行高不匹配导致的错位无效。

解决方案 #

1. 移除固定行限制，让网格自动生成行

把grid-rows-3改成grid-rows-auto，网格会根据内容自动创建所需行，避免固定行高带来的布局错位：

<div className='grid grid-cols-3 grid-rows-auto grid-flow-dense gap-4 mt-10'>
  {/* 子项代码不变 */}
</div>

2. 统一所有网格项的高度

如果需要所有网格项高度一致，把网格项的h-fit换成h-full，让每个项填满所在网格单元格的高度：

<div
  key={idx}
  className='flex flex-col col-span-1 h-full items-center justify-center gap-3 bg-white px-6 py-4 rounded-xl'>
  {/* 子项代码不变 */}
</div>

3. 调整标签容器布局，避免撑高网格项

标签<p>上的flex-grow可能导致部分标签行过多，撑高整个网格项。可以去掉flex-grow，改用flex-shrink-0让标签自适应宽度，或者给标签容器加高度限制：

{/* 方案A：去掉flex-grow，改用flex-shrink-0 */}
<p
  key={idx}
  className='flex-shrink-0 text-[16px] border-[1px] px-2 py-2 border-black mr-2'>
  {tag}
</p>

{/* 方案B：给标签容器加高度限制 */}
<div className='flex flex-wrap gap-2 max-h-24 overflow-y-auto'>
  {/* 标签代码不变 */}
</div>

优先尝试第一种方案，这是解决高度不一致导致空白最直接的方法；如果需要统一项的高度，再结合第二种方案调整。

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