How to create a CSS grid with 3 images (2 on row 1, 1 on row 2) where the third image is centered

Question

I am trying to create a responsive grid. Desktop should be one row with three images all centered. On smaller screens (<720px) I need two images, and the third image to wrap down onto the next line. I've achieved that - but it wraps onto the next line on the left - I need it CENTERED. I assume this is because the way I achieve the 'wrap' was by telling it to create two columns (so it's 'reserved' space for row 2/column 2).

At the moment it looks like this:

I want it to look like this:

@media (min-width: 900px) {
  #grid-container-clients {
    padding-top: 30px;
    margin: auto;
    display: grid;
    width: 900px;
    height: 200px;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: white;
    text-align: center;
  }
  .grid-item-clients {
    /*grid-rows:*/
    position: relative;
    text-align: center;
    border: solid black 1px;
    border-radius: 2px;
  }
}

@media (max-width: 899px) {
  #grid-container-clients {
    padding-top: 30px;
    margin: auto;
    display: grid;
    width: 400px;
    height: 400px;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr;
    background-color: white;
    text-align: center;
  }
  .grid-item-clients {
    position: relative;
    text-align: center;
    border: solid black 1px;
    border-radius: 2px;
  }
}

<div id="grid-container-clients">
  <div class="grid-item-clients"><img src="images/client.png" style="width:100%;"></div>
  <div class="grid-item-clients"><img src="images/client.png" style="width:100%"></div>
  <div class="grid-item-clients"><img src="images/client.png" style="width:100%"></div>
</div>
<!-- End "container-clients" -->

Answer 1

Here is a simplified answer using @Paulie_D's idea of a 6-column grid. Using grid-template-areas, we can explicitly place the grid items to occupy exactly as much space as we want in the grid. The dots represent empty slots in the grid. Because item3occupies columns 3 and 4 in the 6 column grid, it appears centered.

.container {
  justify-content: center;
  display: grid;
  grid-gap: 1rem;
  grid-template-areas: "item item1 item2 item2 item3 item3";
}

.item {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

@media screen and (max-width: 720px) {
  .container {
    grid-template-areas: ". item1 item1 item2 item2 ."
                         ". . item3 item3 . .";
  }
}

<div class="container">
  <div class="item1 item"></div>
  <div class="item2 item"></div>
  <div class="item3 item"></div>
</div>

jsFiddle