Śmieszna siatka

HTML

<div id="grid">
</div>

SCSS

$size = 40px;
$margin = 2px;

.element {
  height: $size;
  width: $size;
  background: red;
  margin: $margin;
}

.row:first-child .top, .row:last-child .bottom, .element:first-child > .left{
    display:none;
}

.row:last-child .bottom{
    display:none;
}

.element > .top,
.element > .left,
.element > .bottom {
  height: $size;
  width: $size;
  background: rgba(0, 0, 0, .4);
  position: absolute;
  z-index: -1;
}

.element .top {
  transform: translate(0, -($size + 2*$margin));
}

.element .left {
  transform: translate(-($size + 2*$margin), 0);
}

.element .bottom {
  transform: translate(0, $size + 2*$margin);
}

.element:hover + .element {
  background: blue;
}

.element:hover > .top,
.element:hover > .left,
.element:hover > .bottom {
  z-index: 2;
  background: blue;
}

.row {
  display: flex;
}

JavaScript

var size = 4;
var row, element, left, top, bottom;
var grid = document.getElementById('grid');

for (var i = 0; i < size; i++) {
  row = document.createElement('div');
  row.className = 'row';
  grid.appendChild(row);

  for (var j = 0; j < size; j++) {
  	  element = document.createElement('div');
      left = document.createElement('div');
      top = document.createElement('div');
      bottom = document.createElement('div');
      element.className = 'element';
			left.className = 'left';
			top.className = 'top';
      bottom.className = 'bottom';
      
      row.appendChild(element);
      element.appendChild(left);
      element.appendChild(top);
      element.appendChild(bottom);
  }
}