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

Question

我使用 Grid 和 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;
}

当视口的宽度大于高度（例如横向）时，此方法效果很好：

但是当高度大于宽度时（例如纵向），正方形会重叠：

我可以通过将

align-items: center;

中的

.inner

更改为

align-items: self

来解决纵向问题，但这会破坏横向布局。

有什么方法可以让它在两者上都工作吗？

CodePen 在这里：https://codepen.io/danielgibbsnz/pen/KKbWoWL（只需将窗口大小调整为纵向即可看到问题）。

---

注意： 我理想地希望使用

aspect-ratio

来完成此操作，而不是诉诸填充黑客（如果可能的话）。

Answer 1

这样的东西效果会更好吗？ （注意：它涉及正方形的随机宽度，所以可能不是你想要的。）

body {
  margin: 0;
}

.container {
  width: 100vw;
  min-height: 100vh;
  background: lightblue;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.inner {
  background: lightpink;
  display: grid;
  place-items: center;
}
.square {
  background: lightgreen;
  aspect-ratio: 1;
  width: 70%;
}

<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>