JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
</div>

CSS

#container {
  background-color: #789;
  display: grid;
  grid-template-columns: 15% 20% 15% 20%; /*let's leave some extra space*/
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas: "butt11 butt22 butt13 butt14"
    "butt21 butt22 butt23 butt24"
    "butt31 butt32 butt33 butt34"
    "butt41 butt42 butt43 butt44";
  width: 300px;
  height: 200px;
  grid-gap: 5px 2px;
  padding: 2px;
  /*justify-items: stretch; the default*/
  /*align-items: stretch; the default*/
  
  /*when there is extra space to use*/
  
  justify-content: space-around;
  /*align-content, for y-direction*/
  
  
  /*this is what kicks in here, since the buttons
  aren't given explicit places */
  grid-auto-flow: column; /*row is the default*/
}

#container button {
  /*margin: 2px;*/
}

JavaScript

let container = document.getElementById("container");
for (let i=1; i<=16; i++) {
	let butt = document.createElement("button");
  butt.innerHTML = i;
  container.appendChild(butt);
}