css – Crop Photographs in an Picture Grid Evenly

I’m creating a React utility to show a grid of photographs by fetching the URLs from a Firestore database. That is what my ImageGrid element seems to be like,

import React from "react";
import useFirestore from "../hooks/useFirestore";

const ImageGrid = () => {
    const {docs} = useFirestore("photographs");

    return (
        <div className="img-grid">
            {docs && docs.map((doc) => (
                <div className="img-wrap" key={doc.id}>
                    <img src={doc.url} alt="uploaded pic"/>
                </div>
            ))}
        </div>
    );
}

export default ImageGrid;

The CSS I’ve used for this element seems to be like this,

.img-grid{
  margin: 20px auto;
  show: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 40px;
}
.img-wrap{
  overflow: hidden;
  peak: 0;
  padding: 50% 0;
  place: relative;
}
.img-wrap img{
  min-width: 100%;
  min-height: 100%;
  max-width: 150%;
  place: absolute;
  prime: 0;
  left: 0;
}

The difficulty I’m going through is that when my photographs are of various sizes, they don’t get cropped evenly. They get copped from just one facet: the correct.

How can I repair this, in order that my photographs are cropped evenly?