title: How to create a expanding CSS Grid with a fixed element inside?
body: <p>I'm trying to create a css grid that expands in height as the content inside adjusts, whilst also anchoring an element to the bottom of the grid item without any content overlap.</p>
  <p>I'd like all of the items to adjust evenly based on the lowest grid item, so if item A is deeper, item B and C should match A with the anchored element also aligning with lowest anchored element from the row. At the moment the content above is overlapping the bottom element and I can't land on the solution.</p>
  <p>I currently have the below code (also here <a href="https://jsfiddle.net/pajov3rb/4/" rel="nofollow noreferrer">https://jsfiddle.net/pajov3rb/4/</a>)</p>
  <p>Any ideas on how I can make this work?</p>
  <p>Thanks for your help in advance!
  Neal</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>.homes-wrapper {
    display: grid;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: minmax(300px, auto);
  }
  
  .home-tile-div {
    position: relative;
  }
  
  .home-title,
  .home-location,
  .home-telephone,
  .home-email-address {
    font-size: 1.6rem !important;
  }
  
  .home-more-info {
    position: absolute;
    bottom: 0px;
    left: 0px;
    font-size: 0.9rem;
    border: 1px solid red;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 20px;
    padding-right: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="homes-wrapper"&gt;
    &lt;div class="home-tile-div"&gt;
      &lt;div class="home-title"&gt;Title Goes Here&lt;/div&gt;
      &lt;div class="home-location"&gt;Location&lt;br&gt;Post code&lt;/div&gt;
      &lt;div class="home-telephone"&gt;Telephone Number&lt;/div&gt;
      &lt;div class="home-email-address"&gt;or email us&lt;/div&gt;
      &lt;div class="home-more-info"&gt;Find out more&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="home-tile-div"&gt;
      &lt;div class="home-title"&gt;Title Goes Here&lt;/div&gt;
      &lt;div class="home-location"&gt;Location&lt;br&gt;Post Code&lt;/div&gt;
      &lt;div class="home-telephone"&gt;Telephone Number&lt;/div&gt;
      &lt;div class="home-email-address"&gt;or email us&lt;/div&gt;
      &lt;div class="home-more-info"&gt;Find out more&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="home-tile-div"&gt;
      &lt;div class="home-title"&gt;Title Goes Here&lt;/div&gt;
      &lt;div class="home-location"&gt;Location&lt;br&gt;Post Code&lt;/div&gt;
      &lt;div class="home-telephone"&gt;Telephone Number&lt;/div&gt;
      &lt;div class="home-email-address"&gt;or email us&lt;/div&gt;
      &lt;div class="home-more-info"&gt;Find out more&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>