如何用Grid实现display:flex与justify-content:center的等效效果？

我有一个包含n个数量可变子元素的div，想要将它们在一行中水平居中显示。在Flex布局中，我会编写如下代码：

display: flex;
justify-content: center;

请问如何不使用Flex，仅通过Grid布局实现该效果？

示例初始代码如下：

CSS #

.a {
  height: 20px;
  width: 20px;
  background: blue;
  border: 1px solid red;
}

.b {
  display: grid;
  gap: 20px;
}

HTML #

<div class="b">
  <div class="a">x</div>
  <div class="a">x</div>
  <div class="a">x</div>
  <div class="a">x</div>
</div>

只需给容器.b添加两个关键属性，就能实现和Flex布局一致的一行水平居中效果：

.b {
  display: grid;
  gap: 20px;
  /* 新增核心属性 */
  grid-auto-flow: column;
  justify-content: center;
}

属性说明 #

• grid-auto-flow: column：Grid默认会按行垂直排列子元素，这个属性会改变排列方向，让子元素自动沿水平方向依次排列，适配子元素数量的变化，确保所有元素在一行内显示。
• justify-content: center：和Flex布局里的同名属性作用相同，将所有子元素组成的整体在容器水平方向上居中对齐。

修改后无论子元素数量如何变化，都会保持一行水平居中的效果。

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