Align the last 2 items in middle css Grid

Question

I'm working with css grid. I'm new to this. I have 5 elements and 6 columns. But how to arrange the last 2 columns in center? Here is the code

.points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}

<div class="points">
  <div class="point">
    <h2><img src="images/experience-5.png" alt=""></h2>
    <h3>Text</h3>
  </div>
  <div class="point">
    <h2><img src="images/experience-5.png" alt=""></h2>
    <h3>Text</h3>
  </div>
  <div class="point">
    <h2><img src="images/experience-5.png" alt=""></h2>
    <h3>Text</h3>
  </div>
  <div class="point">
    <h2><img src="images/experience-5.png" alt=""></h2>
    <h3>Text</h3>
  </div>
  <div class="point">
    <h2><img src="images/experience-5.png" alt=""></h2>
    <h3>Text</h3>
  </div>
</div>

Example

See this image example

Answer 1

If you have to use grids, this is a way :)

.points {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: 1fr .5fr .5fr 1fr;
  justify-items: center;
  
}

.point-1 {
  grid-column: 1 / 2;
}
.point-2 {
  grid-column: 2 /4 
}
.point-4 {
  grid-column: 1 / 3;
  
}
.point-5 {
  grid-column: 3 / -1;
  
}

<div class="points">
      <div class="point point-1">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
      <div class="point point-2">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
      <div class="point point-3">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
      <div class="point point-4">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
      <div class="point point-5">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
    </div>

Here is the same in flex :)

.points {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  
}
.point {
  flex-basis: 30%;
}

<div class="points">
      <div class="point">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
      <div class="point">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
      <div class="point">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
      <div class="point">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
      <div class="point">
        <h2><img src="images/experience-5.png" alt=""></h2>
        <h3>Text</h3>
      </div>
    </div>