title: Position grid items starting at the bottom
body: <p>I have a CSS grid and in this grid articles that could be blog posts. They consist of an image on the left and text on the right.</p>
  
  <p>I need the articles to start at the bottom, so that newer articles appear above them. But I just can't get them to start at the bottom whatever I try it's not working. <code>align-items: end;</code> should do the trick but it doesn't … So what am I missing here? </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>.blog-Grid {
    display: grid;
  }
  
  .post {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 50%;
    margin: 0 0 10% 15%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="blog-Grid"&gt;
    &lt;article class="post"&gt;
      &lt;img id="img" src="images/img1.jpeg" alt=""&gt;
      &lt;div class="post-text-box"&gt;
        &lt;h3 class="post-header"&gt; I'm a header &lt;/h3&gt;
        &lt;p class="post-text"&gt; Lorem ipsum text. &lt;/p&gt;
      &lt;/div&gt;
    &lt;/article&gt;
    &lt;article class="post"&gt;
      &lt;img id="img" src="images/img2.jpg" alt=""&gt;
      &lt;div class="post-text-box"&gt;
        &lt;h3 class="post-header"&gt; I'm a header &lt;/h3&gt;
        &lt;p class="post-text"&gt; Lorem ipsum text.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/article&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>