title: Distribute DIV children evenly over entire height and width of container
body: <p>I have an empty div and I create other divs in it with javascript. I've set up my CSS so it will create a grid. My question is: how can I dynamically resize the divs so they evenly fill their container?</p>
  <p>I tried to illustrate it better with a drawing but my drawing skills aren't that good. Hopefully you will understand what I want.</p>
  <p><a href="https://i.stack.imgur.com/3JoAZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3JoAZ.png" alt="Image" /></a></p>
  <p>The black square is the parent div and the red squares are the children. When I create one div it should fill the parent div (with a little margin).</p>
  <p>With two divs it will split the parent in half.</p>
  <p>With 3 it will behave like you see in the upper right corner of the image, and so on for the others.</p>
  <p>How could I accomplish this with CSS?</p>
  <h1>Some more info:</h1>
  <p>This is a game I have to make for school. This is a previous version but you get the idea of having squares in a div. Now the next task is to let the user chose how many squares they want to play with. But that has to be dynamic and they have to be able to choose numbers like 5 or 8. Not just 4, 9, 16, 25 etc. that's too easy.</p>
  <p><a href="https://luukwuijster.io/school/csp/kleurenspel/" rel="nofollow noreferrer">https://luukwuijster.io/school/csp/kleurenspel/</a></p>