如何将图片设置为CSS Grid网格项 替换网格内蓝色块元素

CSS Grid原生支持将图片作为网格项，你当前代码无法正常替换蓝色块，核心问题是CSS类的书写顺序导致样式优先级异常，同时冗余的内边距会影响图片填充效果，以下提供两种可直接运行的实现方案：

方案1：使用<img>标签作为直接网格项（推荐） #

如果图片属于页面内容的一部分，优先使用该方案，语义化更好且适配无障碍访问，不需要依赖背景属性：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(30em, auto);
  justify-items: stretch;
  align-items: stretch;
}

.grid-item {
  position: relative;
  font-size: 25px;
  padding: 20px;
  padding-top: 50px;
  background-color: #379AD6;
  color: #222;
  border: 1px solid white;
}

/* 作为网格项的图片样式 */
.grid-item-1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid white;
}

.grid-item-3 {
  grid-column: span 2;
  grid-row: span 1;
}

<div class="grid-container">
  <img class="grid-item-1" src="占位示例图片地址" alt="网格展示图片" />
  <div class="grid-item grid-item-2"></div>
  <div class="grid-item grid-item-3"></div>
</div>

关键属性说明：给img设置width: 100%; height: 100%让它完全占满网格分配的空间，object-fit: cover保证图片不变形，按比例裁剪填充整个区域。

方案2：保留原有DOM结构，用背景图实现 #

如果图片是装饰性元素，不需要被搜索引擎/读屏工具识别，可以修复原有背景图写法的问题：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(30em, auto);
  justify-items: stretch;
  align-items: stretch;
}

/* 通用网格项样式放在前面，避免覆盖专属样式 */
.grid-item {
  position: relative;
  font-size: 25px;
  padding: 20px;
  padding-top: 50px;
  background-color: #379AD6;
  color: #222;
  border: 1px solid white;
}

.grid-item-1 {
  padding: 0; /* 移除默认内边距，让图片铺满整个网格项 */
  background: url("占位示例图片地址") center/cover no-repeat;
  overflow: hidden;
}

.grid-item-3 {
  grid-column: span 2;
  grid-row: span 1;
}

<div class="grid-container">
  <div class="grid-item grid-item-1"></div>
  <div class="grid-item grid-item-2"></div>
  <div class="grid-item grid-item-3"></div>
</div>

注意：CSS中同权重的选择器，写在后面的规则会覆盖前面的规则，你原有代码把通用.grid-item样式写在.grid-item-1后面，再加上没有移除内边距，才导致背景图被遮挡、没有铺满。

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