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.