具有流体尺寸的 CSS 网格，在保持纵横比的同时缩小内容

Question

我希望这个自动网格随着浏览器扩展和收缩，同时保持项目在其中居中，保持它们的纵横比。

理想情况下：

• 纯 CSS
• 保持网格处于“自动”模式（无模板）

（我知道用例听起来很蠢，但这是更复杂的伪代码）

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

.grid {
  display: grid;
}

.item {
  aspect-ratio: 1;
}

// Repeated for each item
.item1 {
  grid-row: 1;
  grid-column: 1;
}
.item2 {
  grid-row: 1;
  grid-column: 2;
}
.item3 {
  grid-row: 2;
  grid-column: 1;
}
.item4 {
  grid-row: 2;
  grid-column: 2;
}

<div class="grid">
  <div class="item item1">item1</div>
  <div class="item item2">item2</div>
  <div class="item item3">item3</div>
  <div class="item item4">item4</div>
</div>

---

编辑：视觉上我想要的

在大屏幕上：

|   [1][2]   |
|   [3][4]   |

在窄屏幕上：

|      |
|[1][2]|
|[3][4]|
|      |

Without 指定任何网格都不是项目大小。 （项目扩展到最大宽度或最大高度，其他尺寸相应地容纳）