如何用CSS Grid实现等宽固定高度的相框图片网格布局

AI 小北

2026-9-24

等尺寸相框网格布局调整方案

你代码里有几处语法错误和属性使用不当的问题，按下面修改即可满足需求：

修复网格容器的width属性语法错误：原代码漏写冒号，补全为width: 50%
替换网格列定义：将grid-template-columns: auto auto auto修改为grid-template-columns: repeat(3, 1fr)，1fr会自动等分容器可用宽度，确保三个相框宽度完全相等，不受图片内容影响
移除相框容器的冗余属性object-fit: cover：该属性仅对img、video等替换元素生效，div容器无需设置
（可选）如果需要使用渐变边框，补充border-image-slice: 1属性；不需要的话直接删除border-image整行即可，避免边框样式不符合预期

调整后完整代码

CSS代码

.three-image-container {
  display: grid;
  /* 三列等分容器宽度 */
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  /* 补全冒号 */
  width: 50%;
  /* 可选：容器水平居中 */
  margin: 0 auto;
}

.img-frame-container {
  border: 5px solid #e8e8e8;
  /* 渐变边框相关，不需要可以删除 */
  border-image: linear-gradient(#a8acb180, #aeb1b682);
  border-image-slice: 1;
  box-shadow: 1px 7px 20px 9px rgb(0 0 0 / 75%);
  border-radius: 5px;
  cursor: pointer;
  background: #dfe4ea;
  user-select: none;
  width: 100%;
  height: 100px;
  max-width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.img-frame {
  width: 100%;
  height: 100%;
  /* 保证图片填满容器，多余部分裁剪不变形 */
  object-fit: cover;
}