带有CSS网格的水平滚动

Question

当我在网格完成四列时尝试进行水平滚动时遇到问题。看

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

使用这个我得到以下输出

但是，你知道，我想要像“四列”一样的东西和一个滚动条以查看更多内容。

有什么问题。

原文由 Diego Cardona 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试试这个：

 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-columns: minmax(160px,1fr); 添加到视口外的项目与自动调整不匹配，因此它们不会获得模板中定义的大小。所以你必须用 grid-auto-columns 重新定义它。

溢出-x：自动； 自动将添加滚动条

原文由 Th3S4mur41 发布，翻译遵循 CC BY-SA 4.0 许可协议