Parece que no puedo evitar que estos bloques se envuelvan. La cuadrícula parece funcionar bien para entradas de menos de 50.
Este es mi HTML pero no hay mucho, incluso probé la propiedad de espacios en blanco, en línea. El CSS, que hice un div principal y parece funcionar para el color, sin embargo, no para desactivar la envoltura.
¿Cómo puedo hacer que las filas de cajas continúen?
ingrese la descripción de la imagen aquí
let makeGrid = function(numberOfRows) { let y = 0; let x = 0; while (y < numberOfRows) { x = 0; let makeBox = function(_parentBox, _sizeOfBox) { let box = document.createElement('div'); document.body.appendChild(box); box.style.width = '28px'; box.style.height = '28px'; box.style.border = '1px solid white'; box.style.display = 'inline-block'; return box; }; let makeRowBox = function(parentBox) { let box = document.createElement('div'); parentBox.appendChild(box); //box.style.border = '1px solid black'; return box; }; rowBox = makeRowBox(document.body); while (x < numberOfRows) { makeBox(rowBox, 400); x = x + 1; } y = y + 1; } }; makeGrid(50); div { background-color: rgb(68, 157, 230); white-space: nowrap; overflow: hidden; } div>div { display: inline-block; border: 2px solid white; border: '1px solid black'; margin-right: 4px; } <div style="white-space: nowrap;"></div>Puede diseñar boxRows usando display: inline-flex , por lo que las filas se expandirán para adaptarse a su contenido.
Eliminé todo el CSS en línea que se configuró en javascript. En cambio, agregué una clase a las cajas.
También agregó todos los cuadros azules al body en lugar de .row (rowBox).
Necesitaba la combinación de float y clear para hacer que las cuadrículas más pequeñas rompieran filas.
let makeGrid = function(numberOfRows) { let y = 0; let x = 0; while (y < numberOfRows) { x = 0; let makeBox = function(_parentBox) { let box = document.createElement('div'); box.classList.add("box"); //document.body.appendChild(box); _parentBox.appendChild(box); /* added */ //return box; }; let makeRowBox = function(parentBox) { let box = document.createElement('div'); box.classList.add("row"); parentBox.appendChild(box); return box; }; rowBox = makeRowBox(document.body); while (x < numberOfRows) { makeBox(rowBox, 400); x = x + 1; } y = y + 1; } }; makeGrid(30); .row { display: inline-flex; border: 1px solid black; clear: both; float: left; } .box { --box-spacing: 2px; width: 28px; height: 28px; background-color: rgb(68, 157, 230); border: var(--box-spacing) solid white; flex-basis: 100%; }