由于媒体查询，CSS Grid 未从单列转换为单行

Question

<div class="container">

  <div class="wrapper">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>

</div>


.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: space-around;
  min-width: 300px;
  height: 70vh;
  background: whitesmoke;
}

@media screen and (min-width: 1100px) {
  .container {
    height: auto;
    display: grid;
    grid-template-columns: 1fr repeat(2, minmax(auto, 30rem)) 1fr;
    background: pink;
  }

  .wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column: 2/4;
    justify-content: center;
    background: cyan;
  }
}

我创建了一个包含三个圆圈的列，每个圆圈在一个列中堆叠在一起，当屏幕很窄时，这些圆圈看起来都很好。但是当浏览器被加宽并且我添加了一个媒体查询以了解屏幕何时超过 1100 像素时，我希望 column 的圆圈翻转成为单个 row 圆圈.

但是当我使用 CSS Grid 执行此操作时，它不起作用，两个圆圈出现在一行上，第三个圆圈出现在第二行的第一个圆圈下方。你可以在https://codepen.io/HorrieGrump/pen/ZEKxJgv看到它

如果我使用 flexbox 代替（如下所示），我可以通过换出 CSS 中的当前 .wrapper 块并将这个新块与 flexbox 一起使用来使其工作，但我想知道是否可以使用 CSS Grid 而不是 flexbox 来做到这一点。

谁能告诉我如何让媒体查询使用 CSS Grid 将列翻转为单行 - 而不必求助于 flexbox？

.wrapper {
    display: flex;
    flex-direction: row;
    grid-template-columns: repeat(2,1fr);
    justify-content: space-around;
    align-items: center;
    grid-column: 2/4;
    background: cyan;
  }

Answer 1

编辑 .wrapper 的媒体查询

  .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    grid-column: 2/4;
    background: cyan;
  }