You can try the following:
On the parent container ".container" apply the following
styles:
display: grid;
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
grid-gap: 20px;
align-items: stretch;
Remove all children div's and just have img elements without being wrapped around any other element.
So something like this:
<main class="container">
<img src="/pix/samples/23m.jpg" alt="Sample photo">
<img src="/pix/samples/24m.jpg" alt="Sample photo">
<img src="/pix/samples/22l.jpg" alt="Sample photo">
<img src="/pix/samples/15l.jpg" alt="Sample photo">
<img src="/pix/samples/25m.jpg" alt="Sample photo">
<img src="/pix/samples/16l.jpg" alt="Sample photo">
</main>
Apply the following
styles to the the img's (You can add a shared class name to all img elements)
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
max-width: 100%;
It adjusts quiet nicely when you shrink the screen.
Here is where I got the info from: https://www.quackit.com/css/grid/examples/css_grid_photo_gallery_examples.cfm
