JSFiddle - React, Tailwind, and code Playground

HTML

<ul>

  <li><img src="https://picsum.photos/200/300" alt=""></li>
  <li><img src="https://picsum.photos/300/300" alt=""></li>
  <li><img src="https://picsum.photos/200/400" alt=""></li>
  <li><img src="https://picsum.photos/400/300" alt=""></li>


</ul>

CSS

ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-left: 0;
  list-style-type: none;
}

li {
  position: relative;
  display: grid;
  outline: 1px dotted red;
}

li::before {
  grid-column: 1/2;
  grid-row: 1/2;
  content: "";
  display: block;
  padding-top: 100%;
}

img {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  object-fit: cover;
}