fancy-liquid-catalog

<link integrity='' rel='stylesheet' media='all' href='//fonts.googleapis.com/css?family=Open+Sans:400,600,700'>
<style>
body {
  font-family: 'Open Sans';
}
.grid {
  display: grid;
  grid-gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
  grid-auto-rows: 10px;
}
.product-card {
  background-color: #eff1f7;
  border-radius: 5px;
  overflow: hidden;
}
.product-cart-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product-image {
  width: 90%;
}
.product-text {
  margin-top: 10px;
  text-align: center;
}
</style>
<script>
window.onload = setTimeout(function(){ resizeAllGridItems(); }, 1500);
window.addEventListener('resize', resizeAllGridItems);

function resizeGridItem(item) {
  grid = document.getElementsByClassName('grid')[0];
  rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
  rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
  rowSpan = Math.ceil((item.querySelector('.product-cart-content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
  item.style.gridRowEnd = 'span '+rowSpan;
}

function resizeAllGridItems() {
  allItems = document.getElementsByClassName('product-card');
  for(x=0;x<allItems.length;x++){
      resizeGridItem(allItems[x]);
  }
}
</script>
<div style="
    display: flex;
    justify-content: center;
"><img src="https://d1yx6mil86g02p.cloudfront.net/uploads/document_theme/pdf_logo/210011/logo_logo_Screenshot_2021-04-26_at_12.46.26.png" style="
    width: 85%;
    margin-bottom: 60px;
"></div>
<div class='grid'>
{% for variant in variants %}
  <div class='product-card'>
    <div class='product-cart-content'>
      {% if variant.product_name == "Jeans - Straight Cut" %}
         <img class='product-image' src={{variant.primary_image_url}} style="height:333px; object-fit:cover">
      {% else %}
        <img class='product-image' src={{variant.primary_image_url}}>
      {% endif %}
      <div class='product-text'>
        <span>{{variant.product_name}}</span>
      </div>
      <div style='margin-top: 5px;'><strong style='margin-left: 5px'>${{ variant.sell_price }}</strong></div>
    </div>
  </div>
{% endfor %}
</div>