Intento crear 121 divs a través del DOM y agregarlos al div .container
const container= document.querySelector('.container'); const divNumber= 121; for (let i= 0; i<= 121; i++){ const divs= document.createElement('div'); divs.classList.add('items'); container.appendChild(divs); } .container { display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto; } .items { border: 1px solid black; margin: 0px; } <div class='container'></div>Nada parece suceder en la página web. ¿Cómo puedo hacer 11 por 11, lo que equivale a 121 divs a través del DOM y agregarlos al div principal, .container en este caso?
Todas las cuadrículas se superponen. Agregar propiedad grid-gap
const container = document.querySelector('.container'); const divNumber = 121; for (let i = 0; i < 121; i++) { const divs = document.createElement('div'); divs.classList.add('items'); divs.innerHTML = i + 1 container.appendChild(divs); } .container { display: grid; grid-template-columns: repeat(11,1fr); grid-gap: 20px; } .items { border: 1px solid black; margin: 0px; padding: 5px; color: green; } <div class='container'></div>