Как мне добиться, чтобы мои сетки всегда имели квадратные размеры, равные 1:1? ⇐ Javascript

[Anonymous]

Я только новичок в HTML и JavaScript, поэтому еще не до конца освоил этот язык. Я наткнулся на кирпичную стену и нуждаюсь в помощи.
Нажмите здесь, чтобы узнать ситуацию
Проблема в том, что я пытаюсь создать сетки которые имеют одинаковые квадратные размеры независимо от того, сколько из них запрашивает пользователь для размещения в контейнере.
Контейнер имеет размер 400 x 400 пикселей. Есть строки, которые могут быть созданы максимум # < 100, в зависимости от ввода пользователя, с сетками, заполняющими столбцы строк.
Я добавил соотношение сторон в код CSS,
Я добавил соотношение сторон в код CSS,
р>

Код: Выделить всё

.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… */
overflow: auto;
}

Но, похоже, это не решило проблему.
Я был бы признателен, если бы кто-нибудь помог мне с этим, спасибо.
п>

Подробнее здесь: https://stackoverflow.com/questions/793 ... ions-as-11