Estoy tratando de hacer un grabado un proyecto de boceto, y llenar una cuadrícula nxn con celdas de igual ancho y alto. Ahora, si hago la cuadrícula de celdas de 8x8, 16x16 o 32x32, no tengo problemas, pero cuando la cuadrícula es de 64x64, las celdas no caben en la última columna de la cuadrícula, incluso si hay espacio disponible.

Si alguien pudiera ayudar sería increíble :)

Este es el comportamiento extraño que obtengo:

css grid weird behaviour

El html y css es este:

let grid = document.querySelector("#grid");

let size = 64;

let width = grid.clientWidth;
console.log(width);

grid.setAttribute("style", `grid-template-columns:repeat(auto-fill,${width/size}px); grid-template-rows:repeat(auto-fill,${width/size}px);`);

for (let i = 0; i < size * size; i++) {
  const div = document.createElement("div");
  div.classList.add("cell");
  div.addEventListener("mouseover", (e) => {
    e.target.setAttribute("style", "background-color:black;");
  });
  grid.appendChild(div);
}
* {
  margin: 0;
  padding: 0;
}

#grid {
  display: grid;
  width: 600px;
  height: 600px;
  grid-template-columns: repeat(auto-fill, 75px); /* width / n of columns */
  grid-template-rows: repeat(auto-fill, 75px); /* height / n of rows */
  background-color: white;
  border: solid black 10px;
}

.cell {
  border: solid black 1px;
}
<div id="grid">
</div>
1
Matteo Barberis 25 jun. 2020 a las 13:06

2 respuestas

Me gustaría agregar un comentario pero necesito que le envíe la captura de pantalla. Problema interesante porque puedo verlo perfectamente con su código:

enter image description here

-1
Arm144 25 jun. 2020 a las 10:13

No necesita hacer muchos cálculos, puede simplificar como a continuación y evitar el uso del número flotante donde tendrá problemas de redondeo (especialmente en Firefox)

let grid = document.querySelector("#grid");

let size = 64;

grid.style.setProperty("--n", size);

for (let i = 0; i < size * size; i++) {
  const div = document.createElement("div");
  div.classList.add("cell");
  div.addEventListener("mouseover", (e) => {
    e.target.setAttribute("style", "background-color:black;");
  });
  grid.appendChild(div);
}
* {
  margin: 0;
  padding: 0;
}

#grid {
  display: grid;
  width: 600px;
  height: 600px;
  grid-template-columns: repeat(var(--n,32), 1fr); /* number of column here*/
  background-color: white;
  border: solid black 10px;
}

.cell {
  border: solid black 1px;
}
<div id="grid">
</div>
0
Temani Afif 25 jun. 2020 a las 10:23