How to make a grid that is like a flex row wrap but if the height differes it wont stretch the elements [duplicate]

I am making a grid which will contain some cards. This is for a home automation dashboard so I will have some cards with less content and some with more.

What I want to accoplish is to have a grid that is like a flex row wrap, but if one grid item has less content it wont get "streched" to fit the other elemetnts on the same row. I dont want it to be like this:

In this image, you can see that the left element is stretched.

This is my css:

.grid-container {    display: grid;    width: 100%;    grid-template-columns: repeat(auto-fill, minmax(33%, 1fr));    gap: 10px;}.grid-item {    display: flex;    flex-direction: column;    justify-content: space-between;    background-color: #121314;    padding: 20px;}.card-content {    flex-grow: 1;}.horizontal-line {    border-top: 1px solid #ccc;}

Here is my frontend:

function FluidGrid({ devices }: Readonly<{ devices: IDevice[][] }>) {    return (<div className="grid-container">            {devices.map(deviceArray => (<div className="grid-item">                    {deviceArray.map(device => (<DeviceControl key={device.id} device={device} />                    ))}</div>            ))}</div>    );}

Thanks in advance!

Best regards Max