How can do something similiar to this with css grid?

Question

I'm trying to get a grid layout with 6 elements centered on the page like the following:

But I cannot get the grid is center with images, any idea?

   
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      background-color: #999999;
      padding: 10px;
    }
    
    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
      &.one{
      	background-image: url("img/mainmeu/e.png");
    	}
      &.two{
      	background-image: url("img/mainmeu/b.png");
     	}
    }

   

 <div class="grid-container">
      <div class="grid-item one">1</div>
      <div class="grid-item two">2</div>
      <div class="grid-item three">3</div>  
      <div class="grid-item four">4</div>
      <div class="grid-item five">5</div>
      <div class="grid-item six">6</div>  
    </div>

Answer 1

1. Use column-gap and row-gap for grid spacing.

2. Use background-image properties to center the image inside grid box

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    background-color: #999;
    column-gap: 10px;
    padding: 10px;
    row-gap: 30px;
    justify-items: left;
    align-items: center;
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
    width: 120px;
    height: 120px;
    align-content: center;
    display: inline-grid;
}

.grid-item.one {
    background-image: url("https://via.placeholder.com/200x200");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.grid-item.two {
    background-image: url("https://via.placeholder.com/200x200");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

<div class="grid-container">
    <div class="grid-item one">1</div>
    <div class="grid-item two">2</div>
    <div class="grid-item three">3</div>
    <div class="grid-item four">4</div>
    <div class="grid-item five">5</div>
    <div class="grid-item six">6</div>
</div>