带有css网格的水平滚动

Question

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

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

使用这个我得到低于输出

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

有什么问题。

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;

网格自动流：列；将强制网格将您的元素添加为列而不是跟随可用空间。

网格自动列：minmax(160px,1fr); 添加在视口外的项目与自动调整不匹配，因此它们不会获得模板中定义的大小。所以你必须用 grid-auto-columns 再次定义它。

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

Answer 2

我认为这篇中等文章有答案： https://uxdesign.cc/creating-horizo ​​ntal-scrolling-containers-the-right-way-css-grid-c256f64fc585

基本上，这可以归结为这样一个事实：各个卡片需要具有固定宽度而不是动态宽度，以迫使浏览器不会将它们挤压在一起。