如何用CSS Grid实现Flexbox的space-between布局效果？

我希望通过CSS Grid实现Flexbox中justify-content: space-between的布局效果，可查看我的示例代码（Codepen - Flexbox and Css Grid）。实际想要实现的是下图中Flexbox的布局样式：

当前代码 #

CSS代码 #

.grid-container { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  border: 1px solid black; 
  justify-items: center; 
} 
.flex-container { 
  display: flex; 
  justify-content: space-between; 
  border: 1px solid black; 
} 
.box { 
  margin: 10px; 
  border: 1px solid red; 
  width: 120px; 
  height: 120px; 
  background-color: lightcyan; 
  text-align: center; 
  line-height: 120px; 
}

HTML代码 #

<h1>Css Grid</h1> 
<section class="grid-container"> 
  <div class="box">Box 1</div> 
  <div class="box">Box 2</div> 
  <div class="box">Box 3</div> 
</section> 
<h1>Flexbox</h1> 
<section class="flex-container"> 
  <div class="box">Box 1</div> 
  <div class="box">Box 2</div> 
  <div class="box">Box 3</div> 
</section>

要让CSS Grid实现和Flexbox justify-content: space-between完全一致的布局，只需调整网格容器的两个关键属性：

• 将grid-template-columns: repeat(3, 1fr)改为repeat(3, auto)，让每列宽度自适应内容（而非平分容器宽度）；
• 给网格容器添加justify-content: space-between，控制网格项在容器主轴上的分布逻辑；
• 可移除justify-items: center，避免网格项居中对齐影响边缘布局。

修改后的CSS代码：

.grid-container { 
  display: grid; 
  grid-template-columns: repeat(3, auto); 
  border: 1px solid black; 
  justify-content: space-between; 
} 
.flex-container { 
  display: flex; 
  justify-content: space-between; 
  border: 1px solid black; 
} 
.box { 
  margin: 10px; 
  border: 1px solid red; 
  width: 120px; 
  height: 120px; 
  background-color: lightcyan; 
  text-align: center; 
  line-height: 120px; 
}

调整后，Grid容器的布局会和Flex容器完全匹配：第一个盒子左对齐容器边缘，最后一个盒子右对齐容器边缘，中间盒子自动填充剩余空间并均匀分布。

内容的提问来源于stack exchange，提问作者Juan Reina Pascual