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

<script>
function createGrid(m, n, s) {
  const rowsRep = "(" + m + ", " + s + ")";
  const colsRep = "(" + n + ", " + s + ")";
  
  const pDiv = document.createElement("div");
  pDiv.style.display = "grid";
  pDiv.style.gridTemplateColumns = "repeat" + colsRep;
  pDiv.style.gridTemplateRows = "repeat" + rowsRep;
  pDiv.style.gap = "4px";
  
  for(let i = 0; i < m; i++) {
    for(let j = 0; j < n; j++) {
      const cDiv = document.createElement("div");
      cDiv.style.width = s;
      cDiv.style.height = s;
      cDiv.style.background = "var(--bg)";
      cDiv.style.border = "1px solid var(--muted-border)";
      cDiv.style.borderRadius = "4px";
      pDiv.append(cDiv);
    }  
  }
  
  return pDiv;
}

function createButtonWithCaption(caption) {
  let btn = document.createElement("button");
  btn.innerHTML = caption;
  return btn;
}

function toGridAddButtons(grid, btns, idxs) {
  let cDivs = grid.children;
  let n1 = btns.length;
  let n2 = idxs.length;
  let n = (n1 < n2) ? n1 : n2;
  
  for (let i = 0; i < n; i++) {
    let idx = idxs[i];
    let btn = btns[i];
    let cDiv = cDivs[idx];
    cDiv.style.padding = "0";
    cDiv.style.display = "flex";
    cDiv.append(btn);
    btn.style.flexGrow = "1";
  }
  
  for(let cDiv of cDivs) {
    cDiv.style.border = "0";
  }
}
</script>

<script>
// get container element, set style
let cnt = document.getElementById("container");
cnt.style.marginTop = "1em";

// create button element
let uBtn = createButtonWithCaption("&uparrow;")
let dBtn = createButtonWithCaption("&downarrow;")
let lBtn = createButtonWithCaption("&leftarrow;")
let rBtn = createButtonWithCaption("&rightarrow;")
let btns = [uBtn, rBtn, dBtn, lBtn];

// create grid element
let grid = createGrid(3, 3, "30px");

// add buttons to grid with certain index
let idxs = [1, 5, 7, 3];
toGridAddButtons(grid, btns, idxs);

// append element to container
cnt.append(grid);
</script>