<div class="grid"></div>
* { box-sizing: border-box; }
.grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 16px;
  max-width: 800px;
}

.grid img {
  object-fit: cover;
  max-width: 100%;
}
let grid = document.querySelector('.grid');
for (let i = 0; i < 12; i++) {
  let gridImg = document.createElement('img');
  gridImg.setAttribute('src', 'https://picsum.photos/500');
  grid.appendChild(gridImg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.