styles.css

body{
  margin: 0;
}

.grid {
  display: grid;
/* # of grid rows. This will be set by JS */
  grid-template-rows: var(--grid-rows);
/* # of grid columns. This will be set by JS */
  grid-template-columns: var(--grid-cols);
  grid-row-gap: 5px;
  grid-column-gap: 5px;
  max-width: 1200px;
  height: 100vh;
  margin: 0 auto;
}

.grid div {
/* Variables for start row, start column, height, and width. Will be set by JS */
  grid-area: var(--row) / var(--col) / span var(--hgt) / span var(--wid);
  background-color: var(--bg-color); 
  text-align: center;
/* for vertically centering the text inside the box. nrows = total # of grid rows */  
  line-height: calc(var(--hgt) / var(--nrows) * 100vh);
  color: #860ef5;
}