Как добавить отступы и скролл?

В проекте требуется сделать инвентарь. На данный момент он выглядит так.

Добавил ему свойство display: grid и добавил отступы друг от друга через grid-gap. Хочется также добавить отступы от левого и правого края, чтобы элементы не прилегали вплотную к границе внешнего блока, а также сделать так, чтобы элементы класса slot (с нулями внутри) не выходили за внешний блок items, а если их больше, чем может вместить блок, то тогда они должны скроллится.

Мой фрагмент кода CSS:

.items {
      box-sizing: border-box;
      @include create_element(absolute, 482px,482px,805px,187px, $my-grey); //Внешний блок
      @include create_border(3px, solid, $black, 11px);
      display: grid;
      grid-template-columns: 18.037% 18.037%  18.037%  18.037%  18.037% ;
      grid-gap: 15px;


     .slot {
       @include create_element(static, 68px, 68px, 0px, 0px, grey); //Элементы с 0 по центру
       @include create_border(3px, solid, $black, 5px);
      }
    }

Если это важно, то вот также использованные SCSS миксины:

@mixin create_element($position, $width, $height, $left, $top, $color) {
  position: $position;
  width: $width;
  height: $height;
  background: $color;
  left: $left;
  top: $top;
}

@mixin create_border($type, $size, $color, $radius) {
  border: $type $size $color;
  border-radius: $radius;
}

Подскажите пожалуйста как добавить скролл, а также отступы.