title: Overlapping items in CSS Grid
body: <p>I'm trying to do a responsive layout with css grid by getting two elements to overlap each other halfway. On wide screens they are in one row and overlapping horizontally, but on narrow screens they should be in one column and overlap vertically.</p>
  
  <p>Here is an illustration of what I'm trying to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/YHaZN.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/YHaZN.jpg" alt="enter image description here"></a></p>
  
  <p>Is this behavior possible with css grid? Here is how far I got but now I'm stuck trying to get the vertical overlap.</p>
  
  <h1>CSS</h1>
  
  <pre><code>.wrapper {
    background: white;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(444px, 1fr));
  }
  
  .wrapper__red, .wrapper__green {
    align-self: center;
  }
  
  .wrapper__red {
    z-index: 1;
    background: red;
  }
  
  .wrapper__green {
    justify-self: end;
    height: 100%;
    background: green;
  }
  </code></pre>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;h1 class="wrapper__red"&gt;Title text goes here&lt;/h1&gt;
    &lt;img class="wrapper__green" src="/a.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>