如何在嵌套行容器的Grid布局中实现自适应列宽效果？

核心问题在于每个.row是独立的Grid容器，每行的第一列宽度仅由自身内容决定，无法全局统一。以下是两种简洁有效的解决方案：

方法一：使用display: contents（推荐，兼容性较好） #

让.row元素不生成布局盒子，其内部子元素直接参与外层.list的Grid布局，既保留.row的结构（方便添加行级样式），又能利用外层Grid实现全局列对齐。

.list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
}

.row {
  /* 使row的子元素直接成为外层Grid的子项 */
  display: contents;
}

/* 可选：给每行内容添加样式（如内边距、 hover效果） */
.row > * {
  padding: 0.5rem;
}
.row:hover > * {
  background-color: #f5f5f5;
}

HTML保持原有结构不变：

<div class="list">
  <div class="row">
    <span>First Child</span>
    <span>Second Child</span>
  </div>
  
  <div class="row">
    <span>First</span>
    <span>Second Child</span>
  </div>
  
  <div class="row">
    <span>Long Text Child</span>
    <span>Second Child</span>
  </div>
</div>

方法二：使用CSS子网格（Subgrid） #

若需要.row内部也维持Grid布局并继承外层列宽，可以用子网格特性（需注意浏览器兼容性：Chrome 117+、Firefox 71+、Safari 16+）：

.list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
}

.row {
  display: grid;
  /* 继承父级Grid的列定义 */
  grid-template-columns: subgrid;
  /* 让row占满外层Grid的所有列 */
  grid-column: 1 / -1;
  gap: 1rem;
}

内容的提问来源于stack exchange，提问作者Mustafa.psd