title: VAR setting in grid-template-columns assignment
body: <p>In the following CSS, I can change the setting for:</p>
  <pre><code>    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); 
  </code></pre>
  <p>by manually altering 25rem to 33rem or 40rem (or some other #rem)</p>
  <p>I want to change the value using the CSS var setting, but am having a brain fark.</p>
  <p>I have tried:</p>
  <pre><code>    .mainGrid {
        display: grid;
          grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));   /* original version OK */
      /* none of the following work 
          grid-template-columns: repeat(auto-fit, minmax(var(--chars), 1fr));        --chars: '25rem';
          grid-template-columns: repeat(auto-fit, minmax(var(--chars)+'rem', 1fr));  --chars: 25;
      */
      }
      .mainGrid &gt; section { border: 1px solid black; }
  </code></pre>
  <p>I can change the --chars value with JS, but neither changing 25 to 33 or '33rem' works</p>
  <p>Is this just one area that the CSS var cannot be used because it is a count and not a string?</p>