Início / coding / Perguntas / 79568363
Accepted
코딩마스터
Asked: 2025-04-11 16:22:33 +0800 CST

Como criar uma grade nxn de blocos com dimensões de contêiner fixas usando CSS flexbox?

  • 772

Estou tentando criar uma grade nxn de blocos que caibam em um contêiner fixo (800px x 700px). Consegui gerar o número correto de blocos usando JavaScript, mas estou com dificuldades para alinhá-los perfeitamente no contêiner usando CSS.

Cada bloco deve ser redimensionado automaticamente para que todos os blocos n² caibam exatamente no contêiner sem transbordar, e eles devem formar um layout de grade perfeito.

Aqui está meu código atual:

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);
  }
});
*::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;
}

html

2 respostas

  1. Best Answer

    • adicione *ao seu seletor a primeira regra - para que ela box-sizingse aplique a todos os elementos também, e não apenas aos pseudoelementos.

    • use 100%em seu calc(), em vez dos valores de pixel fixos.

    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(100% / ${select})`;
    div.style.height = `calc(100% / ${select})`;
    container.appendChild(div);
  }
});
    *,
*::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;
}

    • 0

  2. Você quer uma grade e não definir largura e altura no JS

    • gap: 0 para fazer com que as peças fiquem alinhadas umas com as outras.
    • Manipulação de bordas: box-sizing: border-box para incluir os perfuradores no tamanho
    • Tamanho do contêiner fixo: min-width e min-height para que o contêiner permaneça exatamente Xpx × Ypx, mesmo que a janela de visualização seja menor. Aqui, alterei os valores, já que o contêiner empurrou o botão para fora da janela de visualização.

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

btn.addEventListener("click", () => {
  let select = Number(prompt("수 입력: "));
  if (select <= 0 || isNaN(select)) return; // Basic input validation

  container.innerHTML = ""; // Clear existing boxes
  container.style.gridTemplateColumns = `repeat(${select}, 1fr)`; // Set grid columns
  container.style.gridTemplateRows = `repeat(${select}, 1fr)`; // Set grid rows

  for (let i = 0; i < select * select; i++) {
    const div = document.createElement("div");
    div.className = "box";
    container.appendChild(div);
  }
});
    *,
*::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: 300px;
  height: 300px;
  min-width: 300px; /* Prevent shrinking */
  min-height: 300px; /* Prevent shrinking */
  border: 3px solid black;
  display: grid;
  gap: 0; /* No gaps between tiles */
}

.box {
  border: 1px solid black;
  background-color: #f0f0f0; /* for visibility */
}

    • 0

relate perguntas