我正在使用 CSS 网格为卡片项列表创建水平滚动。当您到达水平滚动条的末尾时，我需要在左侧列表的第一项和右侧列表的最后一项留出间距。但是，当滚动列表的中间时，两侧不应有任何间距。
要求
- 卡片列表开头的间距(左侧)
- 卡片列表末尾的间距(右侧)
- 显示的卡片数量必须为 2.5(在页面加载时，显示 2.5 张卡片表示可以水平滚动)
- 列表中的元素数量可能会有所不同，因此无法使用明确的网格
它应该如何看待列表开头的示例，左侧有空格:
向右滚动时应该是什么样子，向左滚动时不应该是什么样子的示例:
列表末尾的示例，右侧有空格:
这是一个codepen on what I am trying to achieve .
我尝试在 ol 上使用 ::before 和 ::after 来尝试填充列表开头和结尾的空白区域，但它遇到了奇怪的结果。
ol {
padding: 0;
list-style: none;
display: grid;
grid-auto-flow: column;
grid-gap: 1rem;
overflow-x: auto;
grid-template-columns: 1rem repeat(auto-fill, calc((20rem - 2rem) / var(--visible-cards))) 1rem;
margin-left: -1rem;
margin-right: -1rem;
&::before,
&::after {
content: '';
}
&::before {
grid-column: 1;
background: blue;
}
&::after {
grid-column: -1;
background: red;
}
::after 并不像我认为通过应用 grid-column: -1 那样位于列表的末尾，而是位于可见区域的末端，在水平滚动开始之前。有谁知道达到要求的方法？如果您愿意，请提前致谢!!!
最佳答案
如果有人有兴趣解决这个问题，最后我只使用了一个 ::after 元素作为所有 li 元素之后的空间。您可以在此处查看更新的代码笔:https://codepen.io/sammiepls/pen/qKwxBg
关于CSS Grid水平滚动，在滚动项前后添加空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51165983/