listing-4.js

var nrows = lines.length-1;                             // total number of rows
var ncols = lines[0].reduce((s,e) => s+Math.abs(e),0);  // total number of columns
var rows = `repeat(${nrows}, 1fr)`;
var cols = `repeat(${ncols}, 1fr)`;
document.documentElement.style.setProperty('--grid-rows', rows);  // CSS variable for grid-template-rows
document.documentElement.style.setProperty('--grid-cols', cols);  // CSS variable for grid-template-columns
document.documentElement.style.setProperty('--nrows', nrows);

boxes.forEach(function(b, i){
      $(`<div>${i+1}</div>`)
      .attr('style', `--row: ${b.row}; --col: ${b.col}; --wid: ${b.wid}; --hgt: ${b.hgt}; --bg-color: ${b.clr};`) // set box grid properties. See styles.css for how it is used.
      .appendTo('.grid');
})