title: How to overlap items using css Grid?
body: <p>I design an app using angular and There is a requirement that  I have to design the grid-like the below image. <strong>item 2</strong> is overlapped with <strong>item1</strong> and all items except item1 will span the width of the host element(container) element?</p>
  <p><a href="https://i.stack.imgur.com/U48wL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U48wL.jpg" alt="enter image description here" /></a></p>
  <pre><code>            &lt;div class=&quot;item1&quot;&gt;
                 this is item 1           
              &lt;/div&gt;
              &lt;div class=&quot;item2&quot;&gt;
                 this is item 2           
              &lt;/div&gt;
              &lt;div class=&quot;item3&quot;&gt;
                 this is item 3           
              &lt;/div&gt;
              &lt;div class=&quot;item4&quot;&gt;
                 this is item 4           
              &lt;/div&gt;
  </code></pre>
  <p>Can you help with my grid CSS?</p>
  <pre><code>  :host{
            height: 100vh;
            display: grid;          
         }
  </code></pre>