JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="popup"></div>
    <h1 id="titletext">Excel Sheets</h1>
    <div id="buttons"></div>
    <div id="sheets"></div>
    <script src="script.js"></script>
  </body>
</html>

CSS

#titletext {
  font-size: 5vh;
}

#sheets {
  display: grid;
  max-height: 100vh;
}

input {
min-width: 0px;
min-height: 0px;
}

JavaScript

const sheets = document.getElementById('sheets');

const siteDocument = document.getElementsByTagName('body')[0];

const amountOfColumns = 5;

const amountOfRows = 20;

for (var x = 0; x < amountOfRows; x++) {
for (var i = 0; i < amountOfColumns; i++) {
  const myNewElement = document.createElement('input');
  myNewElement.width = siteDocument
  sheets.appendChild(myNewElement)
  document.getElementById("sheets").style.gridTemplateColumns = "repeat(" + amountOfColumns +", 1fr)";
}
}
 var inputs = document.getElementsByTagName("input");
 for (var z = 0; z < inputs.length; z++) {
inputs[z].style.height = "calc((50vh/" +amountOfRows +") - 3px)";
//inputs[z].style.maxHeight = "calc((80vh/20) - 100px)";
}