如何将CSS Grid项目设为正方形？跨多列时如何实现等宽高？

嘿，这个问题问得好！我来帮你搞定CSS Grid里的正方形布局，不管是单个项目还是跨多列的情况都有实用方案～

首选方案：用aspect-ratio属性（现代浏览器友好） #

现在大部分现代浏览器都支持aspect-ratio这个CSS属性了，它能直接定义元素的宽高比，设置成1/1就能强制元素变成正方形——哪怕你的Grid项目跨了好几列，也完全不用额外计算！

直接修改你的代码就行：

.wrap{
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
}
.squared{
  background-color: blue;
  grid-column-start: 2;
  grid-column-end: 5;
  /* 关键：设置宽高比1:1 */
  aspect-ratio: 1/1;
  /* 可选：让内容居中显示，更美观 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

这样你的.squared元素（跨了3列）就会自动变成正方形，高度刚好等于它的总宽度。如果是只占一列的Grid项目，同样加这一行就搞定，省心又省力。

兼容旧浏览器的方案：伪元素+padding技巧 #

如果需要支持像IE这类不支持aspect-ratio的旧浏览器，可以用CSS里的一个经典技巧：利用padding-top的百分比是相对于元素自身宽度的特性来撑起高度。

不过跨多列的元素需要稍微调整一下结构，我们给内容套一个内部容器，再用伪元素来实现正方形：

修改后的HTML：

<div class="wrap">
  <div class="squared">
    <div class="squared-content">
      这个蓝色元素应该是正方形。<br/>
      高度与宽度相等。
    </div>
  </div>
</div>

对应的CSS：

.wrap{
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
}
.squared{
  background-color: blue;
  grid-column-start: 2;
  grid-column-end: 5;
  position: relative;
  width: 100%;
}
/* 用伪元素撑起高度，实现正方形 */
.squared::before{
  content: '';
  display: block;
  padding-top: 100%; /* 这个值等于元素宽度的100%，所以高度=宽度 */
}
.squared-content{
  /* 把内容定位到元素内部，避免被padding挤出去 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 可选：内容居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

这个方法的核心是伪元素的padding-top:100%，因为伪元素的宽度和.squared完全一致，所以它的padding-top就等于.squared的宽度，从而让.squared的高度等于宽度，变成正方形。对于只占一列的Grid项目，这个方法同样适用，不需要改任何参数。

总结一下 #

• 现代浏览器直接用aspect-ratio:1/1，简单粗暴效果好，跨列不跨列都能用。
• 旧浏览器就用伪元素+padding的组合，稍微调整结构就能兼容。

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