如何在CSS3 Grid中将一个单元格叠加在另外两个单元格之上

核心思路 #

利用Grid的单元格跨区属性+z-index层级控制，让中心图片容器覆盖整个3x3网格，层级高于两个边角单元格，即可实现边角边框露在图片外侧的效果。

具体修改说明 #

1. 调整网格容器基础样式：补全行模板配置，移除网格缝隙避免边框和图片之间出现留白
2. 配置中心图片容器属性：让中心单元格横跨整个3x3网格，设置更高的层级保证图片盖在边角上方，同时添加居中属性让图片在网格内居中显示

修改后完整代码 #

CSS #

.informacion-imagen {
    display: grid;
    grid-gap: 0; /* 移除缝隙避免留白 */
    grid-template-columns: 3rem auto 3rem;
    grid-template-rows: 3rem auto 3rem; /* 补全行模板，和边角高度对应 */
    max-width: 320px; /* 可选，和图片最大宽度对齐适配 */
}
/* 中心图片容器新增样式 */
.img-wrapper {
    grid-area: 1 / 1 / -1 / -1; /* 跨整个3x3网格 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* 层级高于边角单元格 */
}
#img-info {
    width: 100%;
    max-width: 320px;
    height: auto;
}
#corner-top-right {
    height: 3rem;
    border-top: 6px solid black;
    border-right: 6px solid black;
    z-index: 0;
}
#corner-bot-left {
    height: 3rem;
    border-bottom: 6px solid black;
    border-left: 6px solid black;
    z-index: 0;
}

HTML #

<div class="informacion-imagen">
  <div></div>
  <div></div>
  <div id="corner-top-right"></div>

  <div></div>
  <!-- 给中心div添加img-wrapper类 -->
  <div class="img-wrapper"><img id="img-info" aria-hidden="true" src="assets/img/imagen-informacion.webp" loading="lazy"/></div>
  <div></div>

  <div id="corner-bot-left"></div>
  <div></div>
  <div></div>
</div>

内容的提问来源于stack exchange，提问作者Victor Olvera Cardoso