Как создать сетку n x n плиток с фиксированными размерами контейнера с помощью CSS Flexbox? ⇐ Html

[Anonymous]

Я пытаюсь создать сетку n x n плиток, которые вписываются в фиксированный контейнер (800px x 700px). Мне удалось генерировать правильное количество плиток с использованием JavaScript, но у меня возникают проблемы с их идеальным в контейнере, используя CSS. class = "Snippet">

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

const btn = document.createElement("button");
const body = document.querySelector("body");
body.appendChild(btn);
btn.className = "button";
btn.textContent = "button";

const container = document.createElement("div");
container.className = "container";
body.appendChild(container);

btn.addEventListener("click", () => {
let select = Number(prompt("수 입력: "));
container.innerHTML = ""; // clear existing boxes

for (let i = 0; i < select * select; i++) {
const div = document.createElement("div");
div.className = "box";
div.style.width = `calc(800px / ${select})`;
div.style.height = `calc(700px / ${select})`;
container.appendChild(div);
}
});< /code>
*::after,
*::before {
box-sizing: border-box;
}

* {
margin: 0;
padding: 0;
}

html,
body {
height: 100%;
}

body {
display: flex;
justify-content: center;
align-items: center;
}

.container {
width: 800px;
height: 700px;
border: 3px solid black;
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.box {
border: 1px solid black;
}

Подробнее здесь: https://stackoverflow.com/questions/795 ... sing-css-f