How to get grid column and row elements to expand/resize to fit its parent container?

Question

https://jsfiddle.net/Jbautista1056/pvdq6gye/7/

#Sketch {
    height: 800px;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 25px;
    background-color: white;
    border-radius: 70px;
    border: 70px solid rgba(55, 220, 205, 0.44);
    display: grid;
    grid-template-rows:  repeat(autofit, 1fr) ;           /*auto-fit expands to fit inside the available columns/number specified*/
    grid-template-columns: repeat(4, 1fr);     /*2nd number is how wide u want the column to be*/ 
    grid-row-gap: .3em;
    grid-column-gap: .3em;
}

#tile {
    border: 1px rgba(0, 0, 0, 0.041) solid;
    height: auto;
    width: auto;
    background-color: red;
}

.babytiles {
    height: auto;
    width: auto;
    border: 10px rgba(0, 0, 0, 0.041) solid;
    background-color: red
}

I'm trying to get the rows AND the columns to autofit into the parent div. Im only able to get the rows to adjust themselves to fit into the number of specified columns and vice versa. But I can't get both the rows and columns to align together.

Here's a visual example of what Im getting

Here's what I want to achieve. I'm only able to achieve this by specifying directly that I want 4 columns and 4 rows, but its not dynamic enough to take user input into account.

Ultimately I want to use javascript to take the user inputs to change the number of rows and columns the tiles will take up, while also resizing the tiles to fit into those specifications.

Answer 1

change the grid-template-column

grid-template-columns: repeat(autofit, 1fr);