如何在CSS3网格中将一个单元格覆盖到其他两个单元格上

.informacion-imagen {
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 3rem auto 3rem;
}

#img-info {
    width: 100%;
    max-width: 320px;
    height: auto;
}

#corner-top-right {
    height: 3rem;
    border-top: 6px solid black;
    border-right: 6px solid black;
}

#corner-bot-left {
    height: 3rem;
    border-bottom: 6px solid black;
    border-left: 6px solid black;

<div class="informacion-imagen">

  <div></div>
  <div></div>
  <div id="corner-top-right"></div>

  <div></div>
  <div><img id="img-info" aria-hidden="true" src="YXNzZXRzL2ltZy9pbWFnZW4taW5mb3JtYWNpb24ud2VicA==" loading="lazy"/></div>
  <div></div>

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

</div>

body {
  text-align: center;
}

div {
  margin:.5em;
  display: inline-grid;
}

img {
  margin:.5em;
  grid-column:1;
  grid-row:1;
}

div:before,
div:after{
  content:"";
  border-width:2px;
  border-style:solid;
  border-color: black transparent transparent black;
  width:2em;
  height:2em;
  grid-column:1;
  grid-row:1
}

div:after {
  justify-self:flex-end;
  align-self:flex-end;
    border-color: transparent black black transparent;
}

<div>
  <img src="aHR0cDovL3d3dy5maWxsbXVycmF5LmNvbS8zMDAvMjAw" alt="">
</div>