Wie erstelle ich ein N x N -Gitter von Fliesen mit festen Behälterabmessungen mit CSS Flexbox? ⇐ CSS

[Anonymous]

Ich versuche, ein N x N -Gitter von Fliesen zu erstellen, die in einen festen Behälter (800px x 700px) passen. Ich habe es geschafft, mit JavaScript die korrekte Anzahl von Kacheln zu generieren, aber ich habe Probleme, sie mit CSS perfekt im Container auszurichten. class = "snippet">

Code: Select all

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;
}