Skip to main content

⬅️  Go back

Create an image grid with CSS grid, repeat, and minmax

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.