How do I get my grids to stay consistently the same square dimensions as 1:1?

I am just a beginner to HTML and javascript so I haven't fully grasped the language yet. I have hit a brick wall and am looking for some help.

Click Here For The Situation

The problem is that I am trying to create grids that are consistently square in dimensions no matter how many of them are requested by the user to fit inside a container.

The container is 400 x 400 pixels. There are rows that can be created up to a maximum # of < 100 depending on user input with the grids filling up the row columns.

I added aspect ratio to the CSS code,

.container {
max-width: 400px;
max-height: 400px;
}

.grid {
width: 20px; 
aspect-ratio: 1;
min-height: 0; /* For grid not to grow beyond preferred height set by aspect ratio… */
}

But it appears that this has not solved the problem.

I would appreciate it if anyone could help me with this, thank you.

I found the solution to the problem. An article on min- and max- sizes helped lead me to discover what was the underlying issue that needed to be fixed.1

The specified width: 20px had to be removed because it led to content overflow as the size was set to be the same. Therefore, changing it into 'auto' allowed the width to adjust to the size of the container.

 .container {
min-width: 400px;
min-height: 400px;
max-width: 400px;
max-height: 400px;
}

.grid {
width: auto;
aspect-ratio: 1;
}