Set Gird Template to Same Width and Height

Question

I'm creating a simple grid layout for images and I want them all to be the same size regardless of how big the images are. The images are currently resizing to the largest image in each row.

So how do I set a row height as well? I've tried out some of the options for this link grid-template-rows

But I couldn't seem to set a height for the rows at all.

Also as you can see the last row, the image is a lot smaller but the rest of the rows are bigger because of the image of the skyline.

CSS

.grid {
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 20px;
    align-items: stretch;
}

.grid img {
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
    max-width: 100%;
    object-fit: cover;
    max-height: 100%;
}

HTML

 <div className="grid">
                    <img src="https://images.unsplash.com" alt="img"/>
                    <img src="https://images.unsplash.com" alt="img"/>
                    <img src="https://images.unsplash.com" alt="img"/>
                    <img src="https://images.unsplash.com" alt="img"/>
                    <img src="https://images.unsplash.com" alt="img"/>
                    <img src="https://images.unsplash.com" alt="img"/>
                    <img src="https://images.unsplash.com" alt="img"/>
                    <img src="https://images.unsplash.com" alt="img"/>                    
                </div>