TailwindCSS网格中Card组件无法占满行宽高问题求助

问题出在哪 #

1. 网格容器配置错误：你要的是4×4网格，但代码里用了grid-cols-2（2列布局），而且place-items-center会强制卡片居中显示，无法填充整个单元格；auto-cols-max和auto-rows-max还会限制单元格的最大尺寸，进一步压缩卡片空间。
2. Card自带冗余外边距：组件里的m-auto和my-8会给卡片加上上下外边距并强制水平居中，直接导致卡片无法占满单元格宽度。
3. 无效Tailwind类：hover:bg-white-500是错误写法（白色系没有500灰度值，应该用zinc/gray系列），p类缺少具体间距值（比如p-4），相当于未生效。

怎么改 #

1. 修正网格容器布局

改成4列4行的网格配置，移除place-items-center（Tailwind默认是place-items-stretch，会让子元素自动填充单元格），删掉限制尺寸的auto-cols-max和auto-rows-max，加上grid-rows-4固定4行，间距可按需调整gap值：

<div className="grid grid-cols-4 grid-rows-4 gap-1 w-4/5">

2. 调整Card组件样式

• 移除m-auto和my-8，消除外边距的影响；
• 添加w-full h-full强制卡片占满整个单元格的宽高；
• 修正hover:bg-white-500为hover:bg-zinc-500（或你需要的其他灰度值）；
• 补全p类为具体值，比如p-0（内部子元素已有padding，外层无需重复添加）：

function Card({ title, description }: Props) {
  return (
    <div className="border border-zinc-700 hover:bg-zinc-500 rounded-md w-full h-full">
      <div className="px-5 py-4">
        <h3 className="text-2xl mb-1 font-medium">ok</h3>
        <p className="text-zinc-300">{title}</p>
      </div>
      <div className="border-t border-zinc-700 bg-zinc-900 p-4 text-zinc-500 rounded-b-md">
        {description}
      </div>
    </div>
  );
}

3. 填满4×4网格

4×4网格需要16个Card组件，你原代码只有4个，记得补充剩余12个才能完整填满网格。

额外提示 #

如果是描述笔误，实际想要2×2网格，只需把网格容器的grid-cols-4 grid-rows-4改成grid-cols-2 grid-rows-2即可。若希望行高自适应内容，可去掉grid-rows-4，让网格自动根据内容调整行高。

内容的提问来源于stack exchange，提问作者Ted's Projects