Как изменить размер сетки в том же общем пространстве? Это подход, который заставляет его не работать? ⇐ Javascript

[Anonymous]

const html = document.querySelector("html");
const body = document.querySelector("body");
const mainContainer = document.querySelector(".main-container");

html.style.margin = "0px";
html.style.padding = "0px";

body.style.margin = "0px";
body.style.padding = "0px";

mainContainer.style.width = "400px";
mainContainer.style.height = "400px";

for (s = 0; s < 16; s++) {
const firstColumn = document.createElement("div");
firstColumn.style.display = "flex";

mainContainer.appendChild(firstColumn);
for (i = 0; i < 16; i++) {
const tinySquare = document.createElement("div");
tinySquare.className = "tiny-square";
tinySquare.style.height = "20px";
tinySquare.style.width = "20px";
tinySquare.style.border = "solid 2px black";
firstColumn.appendChild(tinySquare);
tinySquare.addEventListener("mouseover", () => (tinySquare.style.backgroundColor = "red"));
}

}< /code>
< /code>
< /div>
< /div>
< /p>
Я попытался превратить Firstcolumn в гибкость, но все еще не работал, и независимо от того, как Многое я исправляю ширину и высоту MainContainer, он все еще выходит из него < /p>
Я хочу сделать кнопку, чтобы выбрать фиксированное количество квадратов в сетке (16x16, 32x32 ... и т.д.). Так я ожидаю, что пользователь изменит значения (i

Подробнее здесь: https://stackoverflow.com/questions/794 ... proach-tha