如何让CSS Grid两列总宽固定且其中一列自适应内容？

核心思路是通过嵌套Grid拆分布局：将t1和t2列放在一个占总宽度60%的容器内，在这个容器内部再用Grid分配t1和t2的宽度，既满足t2自适应内容且最大宽度不超过总布局的20%，又能让t1自动补满剩余的60%宽度，外层剩余的40%宽度由o1和o2平分。

修改后的代码示例 #

HTML结构（仅调整t1和t2的容器嵌套）

<div class="layout">
  <!-- 嵌套容器：占总宽度60%，包含t1和t2 -->
  <div class="t-group">
    <div>Content t1 1</div>
    <div>Content t2 1</div>
    <div>Content t2 2</div>
  </div>
  <div>Content o1 1</div>
  <div>Content o2 1</div>
  <div>Content o1 2</div>
  <div>Content o2 2</div>
</div>

CSS代码

.layout {
  display: grid;
  /* 外层Grid：第一列占60%，o1和o2平分剩余40% */
  grid-template-columns: 60% 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.t-group {
  /* 让嵌套容器跨两行，对应原t1的跨行需求 */
  grid-row: 1 / span 2;
  display: grid;
  /* 内部Grid：t1占剩余宽度，t2自适应内容且最大宽度为总布局的20%
     计算逻辑：总布局的20% ÷ 父容器的60% = 33.333%，即父容器的33.333%等价于总布局的20% */
  grid-template-columns: 1fr fit-content(33.333%);
  grid-template-rows: 1fr 1fr;
}

/* 样式美化，保持原效果 */
.t-group > div:first-child {
  grid-row: 1 / span 2;
  border: 1px solid #000;
}
.t-group > div:nth-child(2),
.t-group > div:nth-child(3),
.layout > div:not(.t-group) {
  border: 1px solid #000;
}

方案说明 #

1. 外层Grid将整体布局分为三部分：60%的t-group容器、o1、o2，其中o1和o2用1fr自动平分剩余40%宽度。
2. t-group容器内部用Grid实现t1和t2的宽度分配：
   • t1列用1fr自动补满容器内t2之外的空间，确保t1+t2总宽度始终为总布局的60%。
   • t2列用fit-content(33.333%)实现自适应内容，且最大宽度限制为父容器的33.333%（等价于总布局的20%）。
3. 保留了原布局中t1单元格跨两行的需求，通过grid-row: 1 / span 2实现。

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