Tengo una cantidad indefinida de bloques que quiero colocar dentro de un contenedor y hacer que se dividan en 2 líneas como máximo y luego poder desplazarme horizontalmente por esas 2 líneas de bloques.
Estoy probando el código que ves en el fragmento pero no funciona. Es colocar todos los bloques en una sola línea.
let container = document.getElementById('container') let numOfBlocks = 20 // could be any number let blockSize = 200 let blockRightMargin = 10 let maxContainerWidth = Math.ceil(numOfBlocks/2)*(blockSize+blockRightMargin) while (numOfBlocks) { let block = document.createElement('div') block.className = 'block' container.appendChild(block) numOfBlocks-- } container.style['max-width'] = maxContainerWidth + 'px' #horizontal-scroller { position: relative; float: left; height: auto; width: 100%; max-width: 420px; overflow-x: auto; } #container { position: relative; float: left; height: auto; width: auto; text-align: left; font-size: 0; white-space: nowrap; } .block { display: inline-block; width: 200px; height: 200px; margin-right: 10px; margin-bottom: 10px; background: lime; } <div id="horizontal-scroller"> <div id="container"></div> </div>Usar cuadrícula CSS:
#horizontal-scroller { position: relative; max-width: 420px; overflow-x: auto; display: grid; grid-template-rows: 1fr 1fr; /* 2 rows */ grid-auto-flow: column; gap: 10px; } #horizontal-scroller > div { width: 150px; height: 150px; background: lime; } <div id="horizontal-scroller"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>