CSS Grid 水平滚动，在滚动项前后添加空格

Question

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

要求

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

它应该如何查看列表开头的示例，左侧有间距：

在右侧滚动时的外观示例，以及在左侧滚动时的外观示例：

在列表末尾应该如何显示的示例，右侧有间距：

这是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 在列表的末尾，而是在可见区域的末尾，在水平滚动开始之前。有谁知道达到要求的方法？如果您这样做，请提前感谢！

Answer 1

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

Answer 2

您是否尝试过使用 element:first-child 添加左边距和使用 element:last-child 添加右边距？

当您使用 OL-LI 时，代码将是：

li:first-child {
  margin-left: 10px;
}
li:last-child {
  margin-right: 10px;
}