CSS Grid Горизонтальная прокрутка, добавление пробела до и после прокручиваемых элементов

Question

Я использую сетку CSS для создания горизонтальной прокрутки для списка элементов карты. Когда вы достигли конца горизонтальной прокрутки, мне нужно оставить интервал в первом элементе списка слева и последнем в списке справа. Однако при прокрутке середины списка не должно быть пробелов по сторонам.

Требования

1. Интервал в начале списка карт (слева)
2. Интервал в конце списка карт (справа)
3. Количество показанных карточек должно быть 2,5 (при загрузке страницы показывать 2,5 карточки, чтобы указать, что горизонтальная прокрутка доступна)
4. Количество элементов в списке может варьироваться, поэтому невозможно использовать явную сетку

Пример того, как это должно выглядеть в начале списка с интервалом в левой части:

Пример того, как он должен выглядеть при прокрутке справа, и как он не должен выглядеть на левой стороне:

Пример того, как это должно выглядеть в конце списка, с пробелом на правой стороне:

Вот кодекс о том, чего я пытаюсь достичь .

Я пытался использовать ::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

Вы пытались поиграть с элементом: first-child, чтобы добавить левое поле, и элементом: last-child, чтобы добавить правое поле?

Поскольку вы используете OL-LI, код будет:

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