CSS 网格水平滚动，在滚动项目之前和之后添加空间

Question

我正在使用 CSS 网格为卡片项目列表创建水平滚动。当您到达水平滚动的末尾时，我需要在左侧列表的第一项和右侧列表的最后一项留出间距。但是，当滚动列表中间时，两侧不应有任何间距。

要求

1. 卡片列表开头的间距（左侧）
2. 卡片列表末尾的间距（右侧）
3. 显示的卡片数量必须为 2.5（页面加载时，显示 2.5 张卡片表示可以水平滚动）
4. 列表中的项目数量可能会有所不同，因此无法使用显式网格

列表开头的示例，左侧有空格：

向右滚动时应该如何显示以及在左侧不应该如何显示的示例：

列表末尾的示例，右侧有空格：

这是我想要实现的目标的代码笔。

我尝试在 ol 上使用 a::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，而是在水平滚动开始之前位于可见区域的末尾。有谁知道达到要求的方法吗？如果你这样做的话，先谢谢了！

Answer 1

如果有人有兴趣解决这个问题，最后我只使用了一个::after元素作为所有li元素后面的空间。您可以在此处查看更新后的 codepen：https ://codepen.io/sammiepls/pen/qKwxBg