Javascript i grid

Krótka piłka:
Czemu to nie działa:

document.getElementsByTagName('article')[0].style.grid-temlpate-columns = "repeat(" + board.width.toString() + ", 1fr);";

?

Znajduję siedem możliwości:

1. albo nie działa, bo jest literówka: grid-temlpate-columns --> grid-template-columns,
2. albo nie działa, bo w drzewie DOM nie istnieje żaden węzeł article (albo nie istnieje w momencie wykonywania tej linijki kodu),
3. albo nie działa, bo chociaż istnieje co najmniej jeden taki węzeł, to atrybut pierwszego z nich ([0]) style.grid-template-columns jest nadpisywany w innym miejscu,
4. albo nie działa, bo jest problem z kompatybilnością w docelowej przeglądarce --> https://caniuse.com/
5. albo nie działa, bo ten kod Javascript w ogóle nie jest wykonywany (lub nie jest wykonywany wtedy, gdy to sprawdzasz podczas debugowania),
6. albo nie działa, bo board.width.toString() nie zwraca poprawnego parametru dla funkcji repeat (np. liczby) --> https://developer.mozilla.org/en-US/docs/Web/CSS/repeat
7. albo nie działa… bo nie wiadomo, co to znaczy, że nie działa?

style.grid-template-columns jest wyrażeniem oznaczającym style.grid - template - columns (tak, z odejmowaniem).

Ty szukasz style['grid-template-columns'].

Edit: @Maciej Cąderek ma oczywiście rację i powinno to być style.gridTemplateColumns.

Bardzo dziękuję wam za pomoc,

To ma być prosty skrypt do robienia kwadratu o danej ilości pól (3x3, 4x4, 5x5, 6x6 ...) :
https://jsfiddle.net/t4va6qsj/15/

Zrobiłem takie: https://jsfiddle.net/y5df6k31/161/. Nie jest zrobione na css-gridzie, więc pewnie nie o to Ci chodziło, ale swój urok chyba ma. Jak coś będzie potrzeba wytłumaczyć, to chętnie wytłumaczę. Pewnie można to zrobić lepiej, więc nie obrażę się, jeśli ulepszysz. :)

Kod HTML:

<input class="fields-number" type="number">
<button class="creator-button">Create a square!</button>
<div class="square-area"></div>

Kod CSS:

.square-area {
  margin: 10px;
  position: relative;
}

.field {
  border: 1px solid black;
  position: absolute;
}

Kod Javascript:

// a helper function
function createSquareElement(fieldsNumber, fieldSizePx) {
  const square = document.createElement("div");
  const sqRt = Math.sqrt(fieldsNumber);
  for (let i = 0; i < sqRt; ++i) {
    for (let j = 0; j < sqRt; ++j) {
      const field = document.createElement("div");
      field.classList.add(["field"]);
      field.style.height = fieldSizePx + "px";
      field.style.width = fieldSizePx + "px";
      // below, using parseInt(field.style.width)
      //	instead of fieldSizePx allows
      //	creating a rectangle, when needed.
      field.style.left = parseInt(field.style.width) * i + "px";
      field.style.top = parseInt(field.style.height) * j + "px";
      square.appendChild(field);
    }
  }
  return square;
}

// a helper function
function validateNumberInput(numberInputElement) {
  const fieldsNumber = parseInt(numberInputElement.value);
  if (fieldsNumber < minFieldsNumber || fieldsNumber > maxFieldsNumber) {
    throw new Error(`Provide a number of fields between ${minFieldsNumber} (including) and ${maxFieldsNumber} (including).`);
  } else if (Math.sqrt(fieldsNumber) % 1 !== 0) {
    throw new Error("The given number of fields is not a square number.");
  }
  return fieldsNumber;
}

// parameter that could be provided by the user.
//	it is global, what generally is bad.
const fieldSizePx = 20;

// parameters that should NOT be provided by the user
const minFieldsNumber = 4;
const maxFieldsNumber = 36;

// the state of our "application"
let isCreated = false;

// provide minimum and maximum number of fields that the user is able to input
const fieldsNumberInput = document.querySelector(".fields-number");
fieldsNumberInput.min = minFieldsNumber;
fieldsNumberInput.max = maxFieldsNumber;

const button = document.querySelector(".creator-button");
button.addEventListener("click", function() {
  try {
    if (isCreated) {
      throw new Error("The square is already created.");
    }
    const fieldsNumber = validateNumberInput(fieldsNumberInput);
    const square = createSquareElement(fieldsNumber, fieldSizePx);
    document.querySelector(".square-area").appendChild(square);
    isCreated = true;
  } catch (e) {
    alert(e);
  }
});