Creating Multiple DIVS through the DOM and appending to them to the main DIV-CodePudding

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?

CodePudding user response：

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>