JSFiddle - React, Tailwind, and code Playground

CSS

body {
    background-color: white;
    margin: 0;
    text-align: center;

}
.grid {
    display: inline-block;
    background-color: blue;
}
.cellDiv:nth-child(odd) {
    background-color: red;
    float:left;
}
.cellDiv:nth-child(even) {
    background-color: green;
    float:left;
}

JavaScript

console.log('width: ' + window.innerWidth, 'height: ' + window.innerHeight)

  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;
  var size = 10;

// Calculate the number of cells we can fit in the width 
  //and height (there will be extra space)
  w = Math.floor(windowWidth / size);
  h = Math.floor(windowHeight / size);

  // Calculate the extra space
  var widthDiff = windowWidth % size;
  var heightDiff = windowHeight % size;

  // Add the needed amount of height and width to each cell to fill the window
  var widthSize = Math.floor(size + widthDiff / w);
  var heightSize = Math.floor(size + heightDiff / h);

  // Begin to alter the DOM
  var parentDiv = document.createElement('div');
  parentDiv.className = 'grid';
  parentDiv.style.width = (windowWidth - (windowWidth - widthSize * w)) + 'px';
  parentDiv.style.height = (windowHeight - (windowHeight - heightSize * h)) + 'px';

  for(var x = 0; x < w*h; x++) {
    var cellDiv = document.createElement('div');
    cellDiv.className = 'cellDiv';
    cellDiv.style.width = widthSize + 'px'; 
    cellDiv.style.height = heightSize + 'px'; 
    parentDiv.appendChild(cellDiv)
  }
  document.body.appendChild(parentDiv);