title: Centering a grid container
body: <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>#panelb {
    background: lightblue;
    display: grid;
    grid-template-columns: repeat(auto-fit, 300px);
  }
  
  .card {
    background: gold;
  }
  
  .imgcard {
    display: block;
    width: 100%;
    margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='panelb'&gt;
    &lt;div class='card'&gt;
      &lt;img class='imgcard' src='imglink/01.jpg' alt='img'&gt;
      &lt;div class='linktitle'&gt;TITLE&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class='card'&gt;
      &lt;img class='imgcard' src='imglink/02.jpg' alt='img'&gt;
      &lt;div class='linktitle'&gt;TITLE&lt;/div&gt;
    &lt;/div&gt;
  
    ... and so on - about 50 cards
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Everything works, except I want <code>panelb</code> always to be centered on page i.e. with dynamic width and equal left/right margins.</p>
  
  <p>I cannot write <code>display:inline-block;</code> because it is already <code>display:grid</code>.</p>
  
  <p>Also <code>margin: 0 auto</code> makes it width always 100% or another given width, regardless of number of <code>cards</code> in one row.</p>
  
  <p>Any help?</p>