“горизонтальный свиток с сеткой CSS” Ответ

горизонтальный свиток с сеткой CSS

add display grid to parent element and for the child, use this:

display: grid;
grid-gap: 16px;
padding: 16px;
grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
grid-auto-flow: column;
grid-auto-columns: minmax(160px,1fr);
overflow-x: auto;

grid-auto-flow: column; will force the grid to add your elements as column instead of following the free space.

grid-auto-columns: minmax(160px,1fr); the items added outside the viewport do not match auto-fit, so they won't get the size defined in your template. So you have to define it again with grid-auto-columns.

overflow-x: auto; auto will add the scrollbar