如何在横向和纵向布局上使用 CSS 网格中的纵横比来保持纵横比

我使用网格和Flexbox布局了以下元素:

<div class="container">
  <div class="inner">
    <h2>Title</h2>
    <div class="square"></div>
  </div>
  <div class="inner">
    <h2>Title</h2>
    <div class="square"></div>
  </div>
  <div class="inner">
    <h2>Title</h2>
    <div class="square"></div>
  </div>
  <div class="inner">
    <h2>Title</h2>
    <div class="square"></div>
  </div>
</div>

我希望.inner个元素被布置在一个2乘2的网格中，.square个元素保持长宽比为1.

到目前为止，我有以下几个css:

.container {
  width: 100vw;
  height: 100vh;
  background: lightblue;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
.inner {
  background: lightpink;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.square {
  background: lightgreen;
  aspect-ratio: 1;
  flex-grow: 1;
}

如果视区的宽度大于高度(例如，横向)，则可以很好地执行此操作:

但当高度大于宽度时(例如纵向)，正方形会重叠:

我可以通过将.inner中的align-items: center;更改为align-items: self来修复肖像的问题，但这会 destruct 风景的布局.

有没有办法让它在两种情况下都起作用？

CodePen这里:https://codepen.io/danielgibbsnz/pen/KKbWoWL(只需将窗口调整为纵向即可看到问题).

Note:理想情况下，我希望使用aspect-ratio来实现这一点，而不是求助于填充黑客(如果可能的话).