How to prevent Grid items to have same height

Question

Grid forcing to have small div to have same height as neighbor div. But the problem is, the grid is forcing to have items same height even though i have applied h-fit. I want items to come below to each other. In addition, flex box also shows same behavior.

<div className="grid lg:grid-cols-2 sm:grid-cols-1 gap-4">
{accounts.map((account, index) => (
   <div key={index} className="my-4  bg-stone-300 accountsCard rounded-md hover:shadow-md  h-fit">
   //.....
)}
   </div>
</div>

 

My expectations: I want items to come below to each other.