JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Etch-a-Sketch Assignment - The Odin Project</h1>
<div class="bigContainer">

</div>

CSS

.smallBox {
    border: 1px solid black;
    width: 20px;
    height: 20px;
    display: inline-block;
}

.permahover {
    background: red;
}

h1 {
    text-align: center;
}

.bigContainer {
    text-align: center;
}

JavaScript

var n = 16; //take grid column value as you want

const bigContainer = document.querySelector('.bigContainer')

for (var i = 1; i < n; i++) {
  bigContainer.innerHTML += '<div class="row">';

  for (j = 0; j < n; j++) {
    bigContainer.innerHTML += '<div class="smallBox">';
  }
}

document.addEventListener('mouseover', function(e) {
  if (e.target && e.target.className == 'smallBox') {
  		var target = e.target;
    	target.classList.add('permahover');
  }
});