如何使用CSS Grid实现方形卡片容器？

没问题，我来帮你解决这个方形卡片的兼容性问题。aspect-ratio确实还没完全普及，咱们用前端圈里经典的padding百分比 trick来实现全浏览器兼容的方形容器，步骤很简单：

核心思路 #

利用CSS中「padding的百分比值基于父元素宽度计算」的特性，给卡片内部加一个占满宽度、高度等于宽度的占位元素，再把图片绝对定位覆盖上去，这样不管图片尺寸如何，卡片始终保持方形。

修改后的完整代码 #

.card-container{ 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  grid-gap: 0.5rem; 
  padding: 1rem; 
}
.card { 
  position: relative; /* 为绝对定位的图片提供参照 */
  overflow: hidden; /* 裁剪超出卡片的图片部分 */
}
/* 用伪元素创建方形比例占位 */
.card::before {
  content: "";
  display: block;
  padding-top: 100%; /* 高度等于父元素宽度，形成1:1方形 */
}
.card img { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，覆盖整个容器 */
}

关键细节解释 #

• card::before的padding-top:100%：这是实现方形的核心，因为padding的百分比是相对于父元素的宽度，所以100%就意味着高度和宽度完全相等。
• position: absolute的图片：会完全覆盖伪元素的占位空间，加上object-fit:cover就能保证图片不管宽高比如何，都能填满方形容器且不变形。
• overflow:hidden：防止图片超出卡片边界，确保裁剪效果正常。

这个方案兼容所有现代浏览器，甚至包括IE11这类老浏览器，完全不需要依赖实验性属性，比aspect-ratio靠谱多了。

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