时间戳

首页 > 解决方案 > 带 CSS 网格的水平滚动

html - 带 CSS 网格的水平滚动

问题描述

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

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

使用这个我得到以下输出

在此处输入图像描述

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

有什么问题。

标签： htmlcssreactjscss-gridnext.js

解决方案

试试这个：

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;

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

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

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

推荐阅读