JSFiddle - React, Tailwind, and code Playground

HTML

<input placeholder='2' value='2' type='number' id='nn'><input type="number" id='bn' placeholder="7" value="7">
	<br><br>
	<div id='page'>
		<div id='upperblocks'>
			<div class='ublock'>
				
			</div>
			<div class='ublock'>
				
			</div>
			<div class='ublock'>
				
			</div>
			<div class='ublock'>
				
			</div>
			<div class='ublock'>
				
			</div>
		</div>
		<div id='bottomblocks'>
			<div class='dblock'>
				
			</div>
			<div class='dblock'>
				
			</div>
			<div class='dblock'>
				
			</div>
			<div class='dblock'>
				
			</div>
			<div class='dblock'>
				
			</div>
			<div class='dblock'>
				
			</div>
			<div class='dblock'>
				
			</div>
		</div>
	</div>

CSS

#page {
			display: grid;
			grid-template-areas: 'ub''db';
			grid-row-gap: 100px;
		}

		.ublock{
			border: 4px solid black;
			background-color: white;
			width: 50px;
			height: 50px;
			display: inline-block;
		}

		.dblock{
			border: 4px solid black;
			background-color: white;
			width: 50px;
			height: 50px;
			float: left;
		}

		#upperblocks{
			grid-area: ub;
		}

		#bottomblocks{
			grid-area: db;
			display: grid;
			grid-template-columns: min-content min-content;
			grid-column-gap: 2px;
			grid-row-gap: 2px;
		}

JavaScript

function setdowncols(colnum){
			let tc = ""; // grid-template-columns in future
			for(let i = 0; i < parseInt(colnum); i++){
				tc += "min-content "; // Adding one collumn
			}
			document.getElementById('bottomblocks').style.gridTemplateColumns = tc; //replacing present grid with new one
		}

		function setdownblocks(blocks){
			let bblocks = document.createElement('div'); // bottomblocks new container
			bblocks.id = 'bottomblocks'; // Setting ID
			for(let i = 0; i < parseInt(blocks); i++){
				let nb = document.createElement('div'); // new block
				nb.classList.add('dblock'); // setting class for style
				bblocks.append(nb);
			}
			document.getElementById('bottomblocks').replaceWith(bblocks); // Replacing
			setdowncols(document.getElementById('nn').value);
		}

	    document.getElementById('nn').onchange = function(){ // when first input changes value
	    	setdowncols(document.getElementById('nn').value); //invoking change of column number
	    };

	    document.getElementById('bn').onchange = function(){	// when second input changes value
	    	setdownblocks(document.getElementById('bn').value); //invoking change of blocks number
	    };