title: Align grid items to the corners of the container
body: <p>I want to use <a href="https://www.w3.org/TR/css-grid-1/" rel="nofollow noreferrer">CSS Grid</a> to align the items to stick to all 4 corners of the container box.</p>
  
  <p>How would I do this? Does it make sense to use CSS grid or is it better to use flex box?</p>
  
  <p>I have the following HTML:</p>
  
  <pre><code> &lt;div class="container"&gt;
      &lt;div class="box1"&gt;Box1&lt;/div&gt;
      &lt;div class="box2"&gt;Box2&lt;/div&gt;
      &lt;div class="box3"&gt;Box3&lt;/div&gt;
      &lt;div class="box4"&gt;Box4&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>