CSS Grid布局中如何实现单元格独立宽度（自适应+固定）？

首先明确：CSS Grid的列是共享轨道，同一列下的单元格宽度必然绑定，所以你用3列Grid的写法无法让A和B所在的列宽度独立。针对你的需求，最优方案是使用4列Grid，同时也可以评估你提到的两种备选方案：

最优方案：4列Grid布局 #

直接定义4列轨道，让A所在列自适应内容宽度，B所在列固定宽度，通过col-span调整其他单元格的跨列范围，完美匹配你的布局需求。用Tailwind实现的代码如下：

<article class="grid grid-cols-[1fr_1fr_auto_60px] grid-rows-3 h-106">
  <!-- 左侧跨3行的单元格 -->
  <div class="row-span-3"></div>
  <!-- 第一行中间单元格 -->
  <div></div>
  <!-- A：自适应内容宽度 -->
  <div>A</div>
  <!-- 第二行跨2列的单元格 -->
  <div class="col-span-2"></div>
  <!-- 第三行中间单元格 -->
  <div></div>
  <!-- B：固定宽度（这里设为60px，可按需调整） -->
  <div>B</div>
</article>

逻辑说明 #

• grid-cols-[1fr_1fr_auto_60px]定义了4列：前两列平分剩余空间，第三列auto自适应内容（对应A），第四列固定60px（对应B）。
• 各单元格通过row-span-3和col-span-2实现跨行列，完全匹配你要的布局结构，且A、B宽度完全独立。

你的备选方案评估 #

1. 2列Grid + 内部Flex布局 #

可行，但需要额外嵌套Flex容器。具体做法是：

• 右侧分为两个行单元格，每个单元格内用Flex布局：
  • 第一行右侧Flex容器中，A设为flex-shrink:0（自适应内容），剩下的元素占满剩余空间。
  • 第二行右侧Flex容器中，B设为固定宽度，剩下的元素占满剩余空间。
    缺点是多了一层嵌套，代码复杂度略高，不如4列Grid简洁。

2. 4列Grid方案 #

和上面的最优思路一致，完全可行，且是最贴合Grid特性的解决方案，不需要额外嵌套，代码结构清晰，推荐优先使用。

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