JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="grid-item">
    <div class="image image1">
      <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
    </div>  
  </div>
  <div class="grid-item">
    <div class="image image2">
      <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
    </div>  
  </div>
</div>

CSS

/* 
   This is an example of a div around an image
   You can change the grid width/height
   and you can set a max-width on the images
   and it all just fits */
   
   
div.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-template-rows: repeat(auto-fill, 100px);
}
  
div.grid-item {
  background-color: rgba(250,200,55,0.1);
  border-bottom: 5px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  overflow: hidden;
}

img {
  width: 100%;
}

div.image {

}

div.image1 {
  max-width: 40px;
}

div.image2 {
  max-width: 200px;
}