How to prevent Grid items to have same height [duplicate]

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.