Horizontal scroll of grid with items width equal to its content

How do I make a container with horizontal scroll of its items with an item’s width equal to its content(like max-content) using css grid.

I tried this

display: grid;
grid-template-columns: repeat('dynamic value eq to no. of items', max-content);
height: 100%;
gap: 10px;

This does not work and I want to avoid using max-content because I read there is not much browser support.

28 thoughts on “Horizontal scroll of grid with items width equal to its content”