title: How to overlay a cell over two others in a CSS3 grid
body: <p>I need to be able to overlay an image in the center cell of a CSS3 grid over two other cells : one in the top-right corner and the other on the bottom left corner of the grid. Like this:</p>
  <p><a href="https://i.stack.imgur.com/e3nLn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e3nLn.png" alt="Desired outcome" /></a></p>
  <p>So I figured I'd try to do it with a grid and <em>somehow</em> place the cells that have the corner borders underneath the central cell which contains the image. I made a 3x3 grid, placed corresponding borders and got this so far:</p>
  <p><a href="https://i.stack.imgur.com/dqGOp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dqGOp.png" alt="enter image description here" /></a></p>
  <p>This is the HTML and CSS code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="informacion-imagen"&gt;
  
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div id="corner-top-right"&gt;&lt;/div&gt;
  
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img id="img-info" aria-hidden="true" src="assets/img/imagen-informacion.webp" loading="lazy"/&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
  
    &lt;div id="corner-bot-left"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>From here on I have no idea how to address what I need to get the desired result. I've looked extensively on the web but this seems too specific. I'll appreciate any help. Thanks in advance.</p>