为什么我的网格没有放在容器中?

let container = document.querySelector('.container');
let rows = document.getElementsByClassName('gridRow');
let columns = document.getElementsByClassName('gridColumn');

function createGrid(number) {
  makeRow(number);
  makeColumn(number);
}

function makeRow(numberOfRow) {
  for (let i = 0; i < numberOfRow; i++) {
    let row = document.createElement('div');
    container.appendChild(row);
    row.classList.add('gridRow');
  }
}

function makeColumn(numberOfColumn) {
  for (let i = 0; i < rows.length; i++) {
    for (let j = 0; j < numberOfColumn; j++) {
      let column = document.createElement('div');
      column.addEventListener('mouseenter', () => {
        column.classList.add('colored');
      });

      //  column.addEventListener('mouseleave', () => {
      //     column.classList.remove('colored');
      //  })

      rows[j].appendChild(column);
      column.classList.add('gridColumn');
    }
  }
}

createGrid(16);

@import url('https://fonts.googleapis.com/css2?family=Asap:wght@400;600;700&display=swap');

body {
  display: flex;
  flex: 1;
  height: 100%;
  flex-direction: column;
  background-color: beige;
  font-family: Asap, sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.header {
  display: flex;
  flex: 1;
  justify-content: center;
}

#setGridSize {
  display: inline-flex;
  justify-content: center;
  flex: 1;
  gap: 12px;
}

#guide {
  text-align: center;
  margin: 1px;
  font-family: Asap, sans-serif;
  color: red;
  font-size: 13px;
  ;
}

.container {
  display: flex;
  flex: 1;
  border: 2px solid grey;
  justify-content: center;
  align-content: center;
}

.gridColumn {
  display: inline-flex;
  flex: 1;
  border: 1px solid beige;
  margin: -2px 0px;
  width: 100%;
  height: 20px;
}

.colored {
  background: red;
}

.buttons {
  display: flex;
  flex: 1;
  gap: 20px;
}

<h1 class="header"> Let's sketch ! </h1>
<div id="setGridSize">
  <p> Grid size </p> <input type="text" placeholder="Size of Board" class="size-box">
  <button id="submit"> Submit </button>
</div>
<p id="guide"> Enter a number between 2 to 99</p>

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

<div class="buttons">
  <button id="white"> White </button>
  <button id="eraser"> Eraser </button>
  <button id="black"> Black </button>
  <button id="rainbow"> Rainbow </button>
  <button id="reset"> Reset</button>
</div>