Создание сетки с использованием JavaScript без display:grid

const container = document.querySelector(".container");
const input = document.querySelector("input");
const submitBtn = document.querySelector("button");

function createGrid() {
    const value = input.value;
    for (let i = 0; i < value; i++) {        
        const createDivRow = document.createElement("div");
        createDivRow.classList.add("gridrow")
         createDivRow.textContent = i;
        container.appendChild(createDivRow);
    }
    
}

function createGridItems() {  
    const value = input.value;
    //here you select the rows as .gridrow elements
    const divRows = document.querySelectorAll(".gridrow");    
    //iterate over each one of them
    divRows.forEach(divRow =>{
        //and append to it a new div for as many times as the value fetched from the input element
        for(let i=0;i < value; i++){
          const createDivItem = document.createElement("div");
          createDivItem.textContent = "aa";
          divRow.appendChild(createDivItem);
        }        
    });       
}

submitBtn.addEventListener("click", createGrid);
submitBtn.addEventListener("click", createGridItems);

.gridrow{
  border: solid 1px;  
  margin-top: 1em;
}

.gridrow > div {
  border: solid 1px red;
  margin-left: 1em;
  display: inline-block;
}

<div class = "container"></div>

<input type = "text">
<button>submit</button>

const numElements = 1000;

function addDivsOneByOne(containerId) {
  const container = document.getElementById(containerId);
  for (let i = 0; i < numElements; i++) {
    const div = document.createElement('div');
    div.textContent = `${i + 1}`;
    container.appendChild(div);
  }
}

function addDivsInBatch(containerId) {
  const container = document.getElementById(containerId);
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < numElements; i++) {
    const div = document.createElement('div');
    div.textContent = `${i + 1}`;
    fragment.appendChild(div);
  }
  container.appendChild(fragment);
}

function addDivsUsingInnerHTML(containerId) {
  const container = document.getElementById(containerId);
  let html = '';
  for (let i = 0; i < numElements; i++) {
    html += `<div>${i + 1}</div>`;
  }
  container.innerHTML = html;
}

function runBenchmark() {
  document.getElementById('container1').innerHTML = '';
  document.getElementById('container2').innerHTML = '';
  document.getElementById('container3').innerHTML = '';

  const results = [];

  // Measure addDivsOneByOne
  let start = performance.now();
  addDivsOneByOne('container1');
  let end = performance.now();
  results.push(`addDivsOneByOne took ${end - start} milliseconds.`);

  // Measure addDivsInBatch
  start = performance.now();
  addDivsInBatch('container2');
  end = performance.now();
  results.push(`addDivsInBatch took ${end - start} milliseconds.`);

  // Measure addDivsUsingInnerHTML
  start = performance.now();
  addDivsUsingInnerHTML('container3');
  end = performance.now();
  results.push(`addDivsUsingInnerHTML took ${end - start} milliseconds.`);

  // Display results
  document.getElementById('results').innerHTML = results.join('<br>');
}

.container {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}

.container div {
  margin: 2px 0;
}

<div id = "results"></div>

<div class = "container" id = "container1"></div>
<div class = "container" id = "container2"></div>
<div class = "container" id = "container3"></div>
<div>
  <button onclick = "runBenchmark()">Run Benchmark</button>
</div>