Debug SCSS grid layouts (like Singularity) by adding the grid order and classes assigned to it over the item

grid-debugger.scss

.grid-container {
  //debugger
  counter-reset: grid-item;
  [class*="grid-span-"] {
    outline: dotted 1px red;
    position: relative;
    &:hover {
      &:before,
      &:after {
        background: hsla(0,0%,0%,0.0);
        font-size: 1px;
      }
    }
    &:before {
      content: counter(grid-item);
      counter-increment: grid-item;
      color: white;
      font-size: 40px;
      font-weight: bold;
      text-align: center;
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: hsla(0, 0%, 0%, 0.5);
      padding-top: 15px;
    }
    &:after {
      content: "class: " attr(class);
      position: absolute;
      top: 70px;
      font-size: 18px;
      color: white;
      text-align: center;
      z-index: 2;
      display: block;
      width: 100%;
    }
  }
}