JSFiddle - React, Tailwind, and code Playground

by Csaba Hellinger

HTML

<div id="result">

</div>

CSS

#result {
  display: grid;
  ---grid-template-rows: repeat(3,max-content);
  grid-template-columns: 1fr 1fr 1fr 1fr;  
}

.grid {
  display: grid;
  grid-template-rows: repeat(3,max-content);
  grid-template-columns: repeat(3,max-content);  
  margin: 0.2rem;
}
.grid span {
  border: 1px solid black;
  width: 2rem;
  height: 2rem;
}

JavaScript

const result = document.querySelector('#result');
const add = (cells) => {
  const grid = document.createElement('div');
  grid.classList.add('grid');
  cells.forEach(cell => {
    const span = document.createElement('span');
    span.innerText = cell;
    grid.appendChild(span);
  });
  result.appendChild(grid)
}

const fill = (cells) => {
  cells[1] = 15 - cells[0] - cells[2];
  cells[3] = 15 - cells[0] - cells[6];
  cells[5] = 15 - cells[2] - cells[8];
  cells[7] = 15 - cells[6] - cells[8];
}

const step0 = [0,0,0,0,5,0,0,0,0];

const cornerPairs = [[2,8], [4,6]];
const cornerPositions = [[0,8],[2,6],[6,2],[8,0]];
const cornerOpp =       [[2,6],[0,8],[8,0],[6,2]];

  cornerPositions.forEach((cornerPos,cornerPosIndex) => {
  	const step1 = [...step0];
    step1[cornerPos[0]] = 2;
    step1[cornerPos[1]] = 8;
    const [opp1,opp2] = cornerOpp[cornerPosIndex];
    
    const step21 = [...step1];
    step21[opp1] = 4;
    step21[opp2] = 6;
    
    const step22 = [...step1];
    step22[opp1] = 6;
    step22[opp2] = 4;    

    fill(step21);
    fill(step22);

    add(step21);
    add(step22);
  })


//add([0,1,2,3,4,5,6,7,8]);