能否用CSS Grid布局创建正方形网格？如何实现响应式等宽高网格？

当然可以用CSS Grid实现由等大正方形组成的响应式网格！你提到的fr单位仅能让行高相对彼此缩放，无法和列宽建立关联的问题确实很典型，不过现在有两个实用方案能完美解决这个需求：

方法一：使用aspect-ratio属性（现代浏览器推荐） #

这是CSS新增的属性，能直接强制元素保持指定的宽高比，非常适合创建正方形。配合Grid的fr单位，既能实现响应式，又能保证每个单元格都是正方形。

示例代码：

.square-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列，每列宽度均分 */
  gap: 1rem; /* 可选：网格间距 */
}

.square-grid__item {
  aspect-ratio: 1 / 1; /* 强制宽高比1:1，即正方形 */
  background: #eee; /* 可选：背景色方便查看 */
  display: flex;
  align-items: center;
  justify-content: center; /* 可选：让内容居中 */
}

对应的HTML：

<div class="square-grid">
  <div class="square-grid__item">1</div>
  <div class="square-grid__item">2</div>
  <div class="square-grid__item">3</div>
  <div class="square-grid__item">4</div>
  <div class="square-grid__item">5</div>
  <div class="square-grid__item">6</div>
  <div class="square-grid__item">7</div>
  <div class="square-grid__item">8</div>
  <div class="square-grid__item">9</div>
</div>

这个方案的优势是代码简洁，语义清晰，只要你的目标浏览器支持aspect-ratio（目前主流浏览器都已支持），就优先用它。

方法二：利用padding-top百分比技巧（兼容旧浏览器） #

如果需要兼容不支持aspect-ratio的旧浏览器，可以利用CSS的一个特性：padding的百分比值是基于父元素宽度计算的。我们可以给网格项内部加一个占位容器，用padding-top: 100%来撑开高度，让高度等于宽度，从而实现正方形。

示例代码：

.square-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.square-grid__item {
  position: relative;
  background: #eee;
}

.square-grid__item__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center; /* 让内容居中 */
}

.square-grid__item::before {
  content: "";
  display: block;
  padding-top: 100%; /* 高度等于父元素宽度，形成正方形 */
}

HTML结构和方法一类似，只是每个网格项里多了一个内容容器：

<div class="square-grid">
  <div class="square-grid__item">
    <div class="square-grid__item__content">1</div>
  </div>
  <!-- 其他网格项同理 -->
</div>

这两个方法都能让你的3×3网格保持响应式，同时每个单元格都是完美的正方形，你可以根据自己的浏览器兼容需求来选择~

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