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元素之后的空格。您可以在此处查看更新的代码笔：https://codepen.io/sammiepls/pen/qKwxBg

Answer 2

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

使用OL-LI时，代码为：

$mail->body = "Lorem ipsum <br> dolor sit amet";