JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
<div id="container">
  <div id="grid">
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
  </div>
</div>
</body>
</html>

CSS

#container {
  border:3px solid orange;
  width:250px;
  height:250px;
}

#grid {
  border: 1px solid red;
  column-width: 50px;
  column-gap: 0px;
}

#grid > div {
  break-inside: avoid-column; /* Prevent element from breaking */
  page-break-inside: avoid; /* Prevent element from breaking in Firefox */
  background: gray;
  border:1px solid blue;
}

JavaScript

//tl;dr i'm trying to have all items equally be the maximum size possible keeping aspect ratio while fitting in the container. this will mean the # of rows and columns would adjust
//this way if i put more or fewer items, they will grow or shrink in size while optimizing the space of the container.
//the container will not be changing height or width