React+Tailwind：如何让网格容器宽度适配内容并实现指定hover区域变色

在React项目中使用Tailwind CSS开发时，需要实现以下效果：

• 网格容器宽度适配内容，而非占满整行
• 保持三列内容居中布局
• hover每行时，仅内容区域（而非整行宽度）变色

尝试过Grid和Flex布局，但均未实现hover仅内容区域变色的效果，相关代码示例如下：

Grid布局原代码 #

<div className="rounded-md bg-slate-300">
  <div className="grid grid-cols-3">
    <div className="text-center"><strong>Title1</strong></div>
    <div className="text-center"><strong>Title2</strong></div>
    <div className="text-center"><strong>Title3</strong></div>
  </div>
  {
    ["one", "two", "three", "four", "five"].map((item, index) => {
      return (
        <div className="grid grid-cols-3 rounded bg-slate-500"> <!-- Hover on this! -->
          <div className="text-center">{item}</div>
          <div className="text-center">{item}</div>
          <div className="text-center">{index}</div>
        </div>
      )
    })
  }
</div>

Flex布局原代码 #

["one", "two", "three", "four", "five"].map((item, index) => {
  return (
  <div className="flex rounded hover:bg-slate-500">
      <div className="flex justify-center flex-1">{item}</div>
      <div className="flex justify-center flex-1">{item}</div>
      <div className="flex justify-center flex-1">{index}</div>
    </div>
  )
})

核心思路是让行容器宽度由内容决定（而非占满父容器），同时确保整体布局居中，hover效果仅作用于内容区域。以下是两种布局的实现方案：

Grid布局实现 #

<div className="rounded-md bg-slate-300 mx-auto p-2">
  {/* 标题行：inline-grid让宽度适配内容，mx-auto居中 */}
  <div className="grid grid-cols-3 inline-grid mx-auto">
    <div className="text-center px-4 py-2"><strong>Title1</strong></div>
    <div className="text-center px-4 py-2"><strong>Title2</strong></div>
    <div className="text-center px-4 py-2"><strong>Title3</strong></div>
  </div>
  {/* 数据行 */}
  {["one", "two", "three", "four", "five"].map((item, index) => {
    return (
      <div key={index} className="mx-auto">
        <div className="grid grid-cols-3 inline-grid rounded hover:bg-slate-500">
          <div className="text-center px-4 py-2">{item}</div>
          <div className="text-center px-4 py-2">{item}</div>
          <div className="text-center px-4 py-2">{index}</div>
        </div>
      </div>
    )
  })}
</div>

关键调整点：

• 用inline-grid替代grid，让容器宽度由内容撑开，而非占满父容器
• 外层容器和行容器都加mx-auto，确保整体居中
• 给单元格添加px-4 py-2内边距，优化hover区域的视觉体验
• hover效果直接作用在inline-grid容器上，此时容器仅包裹内容，hover时只有内容区域变色

Flex布局实现 #

<div className="rounded-md bg-slate-300 mx-auto p-2">
  {/* 标题行 */}
  <div className="flex inline-flex mx-auto">
    <div className="flex justify-center flex-1 px-4 py-2"><strong>Title1</strong></div>
    <div className="flex justify-center flex-1 px-4 py-2"><strong>Title2</strong></div>
    <div className="flex justify-center flex-1 px-4 py-2"><strong>Title3</strong></div>
  </div>
  {/* 数据行 */}
  {["one", "two", "three", "four", "five"].map((item, index) => {
    return (
      <div key={index} className="mx-auto">
        <div className="flex inline-flex rounded hover:bg-slate-500">
          <div className="flex justify-center flex-1 px-4 py-2">{item}</div>
          <div className="flex justify-center flex-1 px-4 py-2">{item}</div>
          <div className="flex justify-center flex-1 px-4 py-2">{index}</div>
        </div>
      </div>
    )
  })}
</div>

关键调整点：

• 用inline-flex替代flex，让行容器宽度适配内容
• 外层容器和行容器加mx-auto实现整体居中
• 单元格添加内边距，hover效果仅作用在inline-flex容器（内容区域）上

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