I trying to create 121 divs through the DOM, and append to the .container div
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>Nothing seems to happen on the webpage. How can I make 11 by 11 which equals 121 divs through the DOM and append them to the parent div, .container in this case?
All grids are overlapping. Add grid-gap property
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>