CSS 网格。方形细胞。列的宽度调整为行的高度以获得方形单元格

Question

我需要将列的宽度调整为行的高度以获得方形单元格。

例如我有一个 3/4 网格。该网格应该具有响应性并拉伸到父容器的height。 例如，父容器的高度为100vh，我想制作一个3行的网格，这些行应该调整到父容器的高度，并且应该自动创建4列。 细胞应为1/1比例的正方形。

我在网格容器上使用

grid-template-rows: repeat(3, 1fr);

和

grid-auto-flow: column;

并尝试对单元格使用

aspect-ratio: 1 / 1;

。

我面临的问题是当我使用

aspect-ratio: 1 / 1;

时，单元格的高度会调整为宽度（参见屏幕截图）。网格变得更大并溢出父元素...... 但是我需要宽度来调整高度。

预期结果：

更新并解决： 我以为宽高比只适用于网格内部......事实证明它适用于任何元素。 通过将父元素设置为正确的宽高比值，我得到了所需的结果。就我而言，是 3/4。之后，单元格上的长宽比：1/1（正方形）开始正常工作。细胞装入容器中。 如果我的问题不太清楚，我深表歉意。

Answer 1

我希望这有帮助。

.main-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
  grid-gap: 20px;
  padding: 16px;
  border: 1px solid #000000;
  height: 100vh;
}

.childes {
  aspect-ratio: 1 / 1;
  background-color: #1C274C;
  width:100%;
  height:calc(100vh/4);
}

<div class="main-container">
      <div class="childes"></div>
      <div class="childes"></div>
      <div class="childes"></div>
      <div class="childes"></div>
      <div class="childes"></div>
      <div class="childes"></div>
      <div class="childes"></div>
      <div class="childes"></div>
      <div class="childes"></div>
      <div class="childes"></div>
      <div class="childes"></div>
      <div class="childes"></div>
</div>