Why does "style.height/width" doesn't work with variables, only set values?

Currently trying to display a 16x16 grid using Flexbox and some DOM manipulation. This is the code that I would like to create a 16 block row inside the grid container:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Gets grid's dimensions
const gridContainer = document.getElementById("grid-container");
const gridHeight = gridContainer.offsetHeight;
const gridWidth = gridContainer.offsetWidth;


function createBlock() {
  const gridBlock = document.createElement("div");
  gridBlock.style.height = gridHeight / 16;
  gridBlock.style.width = gridWidth / 16;
  gridBlock.style.border = "1px solid black";
  gridContainer.appendChild(gridBlock);
}

function createRow() {
  for (let i = 0; i < 16; i++) {
    createBlock();
  }
}

createRow();

<!-- language: lang-css -->

#grid-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #FFF;
  height: 40rem;
  width: 40rem;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

If I console.log gridBlock.style.height and width, the values are there, but they do not create a block.

If I set them to a fixed value like 40px, the code runs perfectly and the grid row is there as intended.

I know that I can create them with CSS Grid and other methods, but Flexbox and DOM manipulation is what I'm learning ATM and this needs to be done using both. Any help is highly appreciated

You need to append a unit to the width/height, because unitless values for these properties don't mean anything to CSS.

function createBlock() {
    const gridBlock = document.createElement("div");
    gridBlock.style.height = `${gridHeight / 16}px`;
    gridBlock.style.width = `${gridWidth / 16}px`;
    gridBlock.style.border = "1px solid black";
    gridContainer.appendChild(gridBlock);
}

If you're coming from the React world, it is something that needs getting used to, as React intelligently casts numeric values to pixel values internally:

{/* Identical in React world */}
<div style={{ width: 16 }} />
<div style={{ width: '16px' }} />

Since you say you want to learn CSS you can do this using a class and some calc() here I added some color for border and background just to show it working.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Gets grid's dimensions
const gridContainer = document.getElementById("grid-container");

function createBlock() {
  const gridBlock = document.createElement("div");
  gridBlock.classList.add("sixteenth");
  gridContainer.appendChild(gridBlock);
}

function createRow() {
  for (let i = 0; i < 16; i++) {
    createBlock();
  }
}

createRow();

<!-- language: lang-css -->

#grid-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #FFF;
  height: 40rem;
  width: 40rem;
}

.sixteenth {
  width: calc(100% /16);
  height: calc(100% /16);
  border: solid 1px green;
  background-color: #ddffdd44;
}

<!-- language: lang-html -->

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

<!-- end snippet -->