How to center a grid-item horizontally within grid-container when item doesn't span the full width

<div class="grid-container">
  <div class="grid-item1"></div>
  <div class="grid-item2"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  
  .grid-item {
    &1 {
      grid-column: span 4;
    }
    &2 {
      grid-column: span 8;
    }
  }
}