title: Shopify 2.0 Dawn Looking to align elements on a collection page using Flex
body: <p>I am trying to align items in my collection page using flex - but to no avail. I can't figure out where to put the css code. I would like the &quot;learn more&quot; buttons at the bottom of each product description to line up horizontally. I would also like the Descriptions, starting with &quot;Design Edition Year&quot; to line up horizontally as well. I did try imposing a min-height on the fragrance name - but then it is still out of alignment on mobile.</p>
  <p>I appreciate any help.</p>
  <p><a href="https://test-store-colleen.myshopify.com/" rel="nofollow noreferrer">https://test-store-colleen.myshopify.com/</a></p>
  <p>password: thanksforyourhelp</p>
  <p>Page shown below: <a href="https://test-store-colleen.myshopify.com/collections/gift-gallery" rel="nofollow noreferrer">https://test-store-colleen.myshopify.com/collections/gift-gallery</a></p>
  <p><a href="https://i.stack.imgur.com/d1W3M.png" rel="nofollow noreferrer">Image of collection page</a></p>
  <p>A sample of some of the css that I have tried without success.</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>/* component-grid */
  .grid {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
    margin-bottom: 2rem;
    margin-left: -0.5rem;
    padding: 0;
    list-style: none;
  }
  
  @media screen and (min-width: 750px) {
    .grid {
      margin-left: -1rem;
    }
  }
  
  /* edited below to all align-items: flex-end; to align items on collection pages- Colleen */  
    
  .grid__item {
    padding-left: 0.5rem;
    padding-bottom: 0.5rem;
    width: calc(25% - 0.5rem * 3 / 4);
    max-width: 50%;
    flex-grow: 1;
    flex-shrink: 0;
  }
  
  @media screen and (min-width: 750px) {
    .grid__item {
      padding-left: 1rem;
      padding-bottom: 1rem;
      width: calc(25% - 1rem * 3 / 4);
      max-width: 50%;
    }
  }</code></pre>
  </div>
  </div>
  </p>