如何用CSS Grid布局创建基于fr单位的可变宽度正方形？

没问题！完全可以不用JavaScript实现这个需求，核心技巧是利用CSS中padding百分比基于父元素宽度计算的特性，配合定位处理内容，就能让基于fr单位的Grid单元格始终保持正方形形态。

实现思路 #

• 给需要变成正方形的.square元素设置position: relative，作为内部元素的定位基准
• 通过伪元素设置padding-top: 100%，这个伪元素的高度会等于父元素的宽度（padding百分比相对宽度计算），从而让整个.square容器变成正方形
• 把单元格内的内容放在绝对定位的容器里，覆盖在伪元素上方，避免内容撑开容器高度破坏正方形比例

修改后的完整代码 #

.holder { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  column-gap: 4px; 
  row-gap: 4px; 
}
.box { 
  background-color: #ccc; 
}
.wide { 
  grid-column-start: 1; 
  grid-column-end: 3; 
}
/* 核心正方形样式 */
.square {
  position: relative;
  overflow: hidden; /* 防止内容超出容器 */
}
.square::before {
  content: "";
  display: block;
  padding-top: 100%; /* 高度等于宽度，形成正方形 */
}
.square .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px; /* 可选：给内容加内边距 */
}

<div class="holder">
 <div class="box wide">
 <p>This can be any height</p>
 <p>All these divs are sized based on fr, so I want to have the two square divs stay square as they dynamically resize </p>
 </div>
 <div class="box square"> 
   <div class="content">This needs to be a square</div>
 </div>
 <div class="box square"> 
   <div class="content">This needs to be a square as well</div>
 </div>
</div>

原理说明 #

• padding-top: 100%：这个属性的百分比值相对元素的宽度计算，所以当Grid单元格宽度随fr单位变化时，伪元素高度会自动匹配宽度，让容器保持正方形。
• 绝对定位的.content容器：它会完全填充.square的空间，同时不会影响容器尺寸，确保正方形比例不受内容长度影响。
• overflow: hidden：可选配置，防止内容过多时超出正方形容器范围。

这样不管Grid容器怎么缩放，两个.square单元格都会始终保持正方形形态，完全不需要JavaScript干预。

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