<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>
	<body>
		<div id="grid"></div>
		<style>

#grid { display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(16,1fr); width: 300px; height: 300px;}


		</style>

		<script src="script.js"></script>

	</body>
</html>


var x = 30;

var grid = document.getElementById("grid");



grid.style.gridTemplateColumns = `repeat(${x}, 1fr)`;
grid.style.gridTemplateRows = `repeat(${x}, 1fr)`;

for (var i = 0; i < x * x; i++ ){

	var cell = document.createElement("div");

	cell.style.border = "0.1px solid black";
	cell.style.borderCollapse = "collapse";

	grid.appendChild(cell);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.