Horizontal scroll with css grid

Question

I'm having a problem when I am trying to make a horizontal scroll when the grid complete four columns. See

#series {
    display: grid;
    grid-gap: 16px;
    overflow-x: scroll;
    padding: 16px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: column;
}

Using this I get below output

But, you know, I want to get same like "four columns" and a scroll bar for see more.

What's the problem.

Answer 1

Try it with 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