How to make children adjust to the height of parent container using CSS grid?

See more:

grid

CSS3

DOM

I'm trying to make a sketchpad, which is a project from https://theodinproject.com. By default, the sketchpad has 16x16 grid of squares. The squares are expected to change when the user input the number of squares he wants while maintaining the dimensions of the grid container. I used CSS grid to do that.

The problem is when the user input the number squares, the grid do not fill the height of its container. They normally leave a blank space.

What I have tried:

I've tried different layout but CSS grid is the only that gets me close to the solution.

button.addEventListener("click", () => {
    let num = prompt("Enter the number of squares", "0");
    let count = num * num;
    createDiv(count);

    container.setAttribute(`style`,
     `grid-template-columns: repeat(${num}, 1fr);
      grid-template-rows: repeat(${num}, 1fr);`);
 });

Here is a pen of the project https://codepen.io/Shahidharis/pen/poLKzqj