title: Stacking flex items on top of each other
body: <p>I'm trying to build a layout like this one with flexbox:</p>
  
  <p><a href="https://i.stack.imgur.com/CgOWt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CgOWt.png" alt="enter image description here"></a></p>
  
  <p>how can I stack the items on top of one another?</p>
  
  <p>I build what's on the above screenshot using CSS grid, but failing to do this with flexbox.</p>
  
  <pre><code>.grid {
    display: grid;
    height: 100%;
    grid-template-columns: 2rem repeat(2, auto) 2rem;
    grid-template-rows: 4rem 4rem auto;
    background-color: #fff;
  }
  
  .layer1 {
    background-color: rgb(64, 213, 187);
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row-start: 1;
    grid-row-end: span 3;
  }
  </code></pre>