CSS Grid：如何让同一区域内多个子项实现类Flex行排列？

我想要创建一个仅包含图片、段落和两个按钮的简单卡片，预期效果如图所示。编写的HTML结构如下：

<div class="container">
  <img src="" alt="">
  <p></p>
  <button></button>
  <button></button>
</div>

对应的CSS Grid布局代码为：

.container{  
  padding: 2rem;
  grid-template-columns:[img-start] 120px [img-end content-start] 1fr [content-end];
  grid-column-gap: 1.6rem;
  grid-template-rows: repeat(2, auto)
}

设置按钮布局时，使用如下代码：

button{
  grid-column: content;
  grid-row: 2/3;
}

但此时两个按钮出现重叠，无法并排显示。我希望不借助Flexbox包裹按钮的方式，使用原生CSS Grid实现该区域类似flex-row的排列效果，请问是否有可行方案？

方案1：利用grid-auto-flow实现自动列排列 #

核心思路是让容器在按钮所在的网格行中，自动生成适配按钮宽度的隐式列，让按钮横向排列：

.container{  
  padding: 2rem;
  display: grid; /* 补充原代码缺失的display:grid */
  grid-template-columns:[img-start] 120px [img-end content-start] 1fr [content-end];
  grid-column-gap: 1.6rem;
  grid-template-rows: repeat(2, auto);
  /* 针对第二行设置自动列流 */
  grid-auto-flow: column;
  grid-auto-columns: max-content; /* 按钮宽度适配自身内容 */
  align-items: start; /* 避免按钮被纵向拉伸 */
}

/* 明确各元素的网格位置 */
img{
  grid-column: img;
  grid-row: 1 / span 2; /* 图片跨两行，符合卡片常见布局 */
}

p{
  grid-column: content;
  grid-row: 1;
}

button{
  grid-column: content;
  grid-row: 2;
  margin-right: 0.8rem; /* 可选：给按钮添加间距 */
}

原理：grid-auto-flow: column会让同一网格单元格内的元素自动按列排列，grid-auto-columns: max-content确保按钮不会被不必要地拉伸，保持内容宽度。

方案2：使用CSS Subgrid（子网格）精准控制 #

如果你的目标浏览器支持Subgrid（Chrome 117+、Firefox 71+等现代浏览器已支持），可以让按钮所在的网格区域创建子网格，实现更灵活的排列：

.container{  
  padding: 2rem;
  display: grid;
  grid-template-columns:[img-start] 120px [img-end content-start] 1fr [content-end];
  grid-column-gap: 1.6rem;
  grid-template-rows: auto [button-row] auto;
}

img{
  grid-column: img;
  grid-row: 1 / span 2;
}

p{
  grid-column: content;
  grid-row: 1;
}

/* 让按钮在content列的单元格内创建子网格 */
button{
  grid-column: content;
  grid-row: button-row;
  display: grid;
  grid-template-columns: repeat(auto-fit, max-content);
  gap: 0.8rem;
  width: 100%; /* 确保子网格占满content列宽度 */
}

原理：通过给按钮设置display: grid，在content列的网格单元格内创建子网格，repeat(auto-fit, max-content)会根据按钮数量自动生成合适的列，实现横向排列。

内容的提问来源于stack exchange，提问作者Hécalim