title: Centre CSS Grid Items Dependent On Dynamic Content Count
body: <p>I have a series of images that are fetched from a database, and when three or more images are added it visually shows the three columns.</p>
  <p>When less than three images are present, because I'm using <code>display: grid;</code> it is currently justified to the left of the parent container (in the code example I've just used red boxes to represent the images).</p>
  <p>Is there anyway of having it so that when one or two images are present these are justified to the centre of the parent element. I appreciate I could use javascript to detect how many images are present and if it is less than three, add a class and change the wrapper to <code>display: flex</code>, but I wondered if such a layout was possible with CSS only?</p>
  <p>Due to the nature of the layout I do need to use CSS Grid when more than three images are present.</p>
  <p><strong>Note:</strong> I've commented out two of the red boxes in the HTML to show the initial issue when only one red box is present.</p>
  <p>Codepen: <a href="https://codepen.io/anna_paul/pen/xxXrVJQ" rel="noreferrer">https://codepen.io/anna_paul/pen/xxXrVJQ</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>body {
    display: flex;
    justify-content: center;
    margin: 0
    width: 100%;
    height: 100vh;
  }
  
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
    max-width: 1250px;
  }
  
  .box {
    width: 200px;
    height: 200px;
    background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="box"&gt;&lt;/div&gt;
  &lt;!--   &lt;div class="box"&gt;&lt;/div&gt;
    &lt;div class="box"&gt;&lt;/div&gt; --&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>