<ul>
  <li>
    <img src="https://source.unsplash.com/random?iran" alt="">
  </li>
  <li>
    <img src="https://source.unsplash.com/random?usa" alt="">
  </li>
  <li>
    <img src="https://source.unsplash.com/random?spain" alt="">
  </li>
  <li>
    <img src="https://source.unsplash.com/random?italy" alt="">
  </li>
  <li>
    <img src="https://source.unsplash.com/random?southafrica" alt="">
  </li>
  <li>
    <img src="https://source.unsplash.com/random?colombia" alt="">
  </li>  
</ul>

ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 90vw;
  padding: 0;
  margin: 32px auto;  
  list-style-type: none;
}
  
li {
  aspect-ratio: 4 / 3;
}

img {
  display: block;
  width: 100%;
  height: 100%;  
  object-fit: cover;
}