title: CSS Grid - keep all children on one row and equally spaced
body: <p>Using CSS Grid, how can I keep all of the children in one row when you don't know how many children there will be?</p>
  <p>I need all children to have equal <code>width</code>, so if there are 2 children they will each have 50% width and if there are 3 children they each get 33.33% width etc.</p>
  <pre><code>.container {
     display: grid;
  }
  
  &lt;div class='container'&gt;
     &lt;div&gt;Child 1&lt;/div&gt;
     &lt;div&gt;Child 2&lt;/div&gt;
     &lt;div&gt;Child 3&lt;/div&gt;
     // There maybe 4 or 5 children we don't know
  &lt;/div&gt;
  </code></pre>