如何让响应式3×3网格及单元格随屏幕保持正方形形态？

我需要创建一个3列3行的响应式网格，要求任意设备尺寸下单元格都保持正方形。目前在笔记本屏幕上显示正常，但移动端会变成矩形。当前代码使用占80vh高度的flex容器包裹grid容器，每个网格项同时作为flex项，原代码如下：

原CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-size: 1rem;
}

.grid-wrapper {
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-gameboard-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 50vh;
  grid-gap: 5px;
}

.grid-item {
  background-color: lightblue;
  display: flex;
  min-width: 100px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

原HTML代码 #

<div class="grid-wrapper">
  <div class='grid-gameboard-container'>
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</div>

核心思路是强制单元格宽高比为1:1，同时限制网格容器的尺寸逻辑，避免移动端出现宽高不匹配的情况。以下是修改后的完整代码：

修改后的CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-size: 1rem;
}

.grid-wrapper {
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px; /* 避免移动端网格贴边 */
}

.grid-gameboard-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  width: 100%;
  max-width: 80vh; /* 限制宽度不超过父容器高度，保证整体比例协调 */
}

.grid-item {
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  aspect-ratio: 1 / 1; /* 强制宽高比1:1，单元格始终为正方形 */
}

修改后的HTML代码（无需改动） #

<div class="grid-wrapper">
  <div class='grid-gameboard-container'>
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</div>

关键修改说明 #

1. aspect-ratio: 1/1：直接指定网格项的宽高比为1:1，现代浏览器都支持该属性，确保单元格无论尺寸如何变化都保持正方形。若需兼容旧浏览器，可替换为padding-top: 100%结合内部绝对定位元素的方案。
2. max-width: 80vh：限制网格容器的最大宽度不超过父容器的高度（80vh），避免宽屏设备上网格过宽，同时保证窄屏（移动端）时网格宽度适配屏幕，高度自动匹配宽度。
3. 移除原代码中min-height:50vh和min-width:100px的硬限制，让网格完全响应式。

内容的提问来源于stack exchange，提问作者Power Ranger