This is my ProductCard component:

export default function ProductCard({
  props,
}: {
  props: ProductCardProps;
}) {
  return (
    <div data-product-id={props.productUrl}>
      <Card className="block relative">
        <CardContent className="px-2">
          <a href={props.productUrl}>
            <figure>
              <Image
                decoding="async"
                src={getImageSrcPath(props.imageSrc)}
                alt={props.heading}
                height={300}
                width={300}
              />
            </figure>
            <h2 className="min-h-16 text-lg leading-none font-semibold mx-0 my-3">{props.heading}</h2>
            <div className="mb-1.5 pr-0.5 font-medium text-base text-black">
              {i18n.localCurrency.symbol} {props.localPrice}
            </div>
          </a>
        </CardContent>
      </Card>
    </div>
  );
}

These I show in my ProductGrid component:

export default async function ProductGrid({ gridKey, products }: { gridKey: number, products: ProductCardProps[] }) {
  return (
    <div className="container m-auto grid gap-1 lg:gap-2 xl:gap-5 grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6" >
      {products.map((item, index) => (
        <ProductCard key={`${gridKey}-${index}`} props={item} />
      ))}
    </div >
  );
}

My problem here, and I'm a frontend noob, is that despite the cards in the grid all being the same width, and me putting height and width of 300 on the Image in the card, many cards in the grid have different heights due to them having different size image files.