title: CSS Grid with max number of columns with dynamic children
body: <p>I have a simplified version of what I'm trying to do in a project.  The parent can have any number of children as they are pulled from the db.  The children do not have a set width.  I would like to set a max number of columns per row before wrapping and if there are less than that max, the children would widen and fill that space.  As you can see in the example below, when there are only 3 children, there is a gap the size of the 4th child to the right.  How can I accomplish this?</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>#parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
  }
  
  .children {
    background-color: red;
    height: 2em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="parent"&gt;
    &lt;div class="children"&gt;&lt;/div&gt;
    &lt;div class="children"&gt;&lt;/div&gt;
    &lt;div class="children"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>