Tailwind Css Grid Image Sizing

[Ameenafsar]

{% set products_to_loop = section.settings.collection.p_products | p_paginate({per_page: 100}) %}

<script type="text/javascript"> window.pdcProducts = {{ products_to_loop | json_encode | raw }}; const products = window.pdcProducts; console.log(products); </script>

Customers also purchased

<div class="grid grid-cols-1 gap-x-4 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8 bg-white">
  {% for product in products_to_loop.data %}
    <a href="#" class="group flex aspect-w-1 aspect-h-1">
      <div class="object-fit cover overflow-hidden rounded-lg bg-white-200 aspect-ratio-square">
        <img src="{{ product.featured_image.src }}" alt="{{ product.title }}" class="w-full object-fit cover object-center">
      </div>
      <h3 class="mt-4 text-sm text-gray-700">{{ product.title }}</h3>
      <p class="mt-1 text-lg font-medium text-gray-900">{{ product.price }}</p>
    </a>
  {% endfor %}


</div>

some of the images are making the grid smaller and higher. please help

[wongjn]

How is the grid getting smaller? What do you mean by "higher"? How does it behave differently than what you want? Consider providing images of what you'd like vs what is happening please! Consider providing a Tailwind Play that reproduces the issue. You can use placeholder images that are the same size as your real project to emulate the problem.