title: How to create a CSS grid with 3 images (2 on row 1, 1 on row 2) where the third image is centered
body: <p>I am trying to create a responsive grid. Desktop should be one row with three images all centered. On smaller screens (&lt;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).</p>
  <p>At the moment it looks like this:</p>
  <p><a href="https://i.stack.imgur.com/ISF3t.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ISF3t.jpg" alt="enter image description here" /></a></p>
  <p>I want it to look like this:</p>
  <p><a href="https://i.stack.imgur.com/5Olo2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Olo2.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="grid-container-clients"&gt;
    &lt;div class="grid-item-clients"&gt;&lt;img src="images/client.png" style="width:100%;"&gt;&lt;/div&gt;
    &lt;div class="grid-item-clients"&gt;&lt;img src="images/client.png" style="width:100%"&gt;&lt;/div&gt;
    &lt;div class="grid-item-clients"&gt;&lt;img src="images/client.png" style="width:100%"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- End "container-clients" --&gt;</code></pre>
  </div>
  </div>
  </p>