This grid layout is very easy to accomplish with CSS grid. The magic lies inside a couple lines of CSS:

.grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(4em, 8em));
}

What’s happening here, exactly?

• repeat tells CSS grid to repeat the rules inside the expression.
• 10 represents the desired number of columns before it begins to repeat.
• minmax sets a minimum and maximum size for each column.

To prevent horizontal overflow on smaller devices and keep the entire grid centered also requires two more lines of CSS:

.grid {
    overflow: hidden;
    justify-content: center;
}

And if there are more images than can fit inside the grid and still look reasonable, with a touch of JavaScript the images can randomly fade in and out and replace one another until there are no new images left to load.