如何在占屏幕1/3高度的容器中实现6个响应式正方形布局？

我需要在高度为屏幕1/3的固定尺寸容器中展示6个正方形，效果参考上图。目前已完成布局，但在多模拟器运行时正方形会变为矩形，请问如何实现该布局并保证响应式？

核心是强制子元素保持1:1的宽高比，同时让容器固定为视口高度的1/3，以下是两种可靠的实现方式：

方法一：CSS Grid + aspect-ratio（现代浏览器首选） #

利用CSS Grid快速搭建2行3列布局，通过aspect-ratio属性直接强制正方形比例：

<div class="square-container">
  <div class="square">1</div>
  <div class="square">2</div>
  <div class="square">3</div>
  <div class="square">4</div>
  <div class="square">5</div>
  <div class="square">6</div>
</div>

/* 容器：固定高度为屏幕1/3，网格均分空间 */
.square-container {
  height: calc(100vh / 3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px; /* 正方形间的间距，可自定义 */
  box-sizing: border-box;
  padding: 8px; /* 容器内边距，可自定义 */
}

/* 正方形子元素：强制1:1宽高比 */
.square {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  background-color: #e0e0e0; /* 示例背景色 */
  display: flex;
  align-items: center;
  justify-content: center;
}

方法二：CSS Grid + padding-top（兼容旧浏览器） #

如果需要兼容不支持aspect-ratio的旧浏览器，可通过padding-top: 100%的经典技巧实现正方形：

<div class="square-container">
  <div class="square">
    <div class="square-content">1</div>
  </div>
  <div class="square">
    <div class="square-content">2</div>
  </div>
  <div class="square">
    <div class="square-content">3</div>
  </div>
  <div class="square">
    <div class="square-content">4</div>
  </div>
  <div class="square">
    <div class="square-content">5</div>
  </div>
  <div class="square">
    <div class="square-content">6</div>
  </div>
</div>

.square-container {
  height: calc(100vh / 3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  box-sizing: border-box;
  padding: 8px;
}

.square {
  position: relative;
  width: 100%;
}

/* 通过padding-top让高度等于宽度，形成正方形 */
.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}

布局变形的原因 #

之前的布局没有绑定子元素的宽高比，当容器在不同屏幕尺寸下拉伸时，子元素的宽高会分别适配网格单元格的宽和高，导致比例失衡变成矩形。上述两种方法通过强制1:1比例，确保无论容器尺寸如何变化，子元素始终保持正方形。

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