debug.html

<div class="d-grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

<style>
  :root {
    --d-grid-margin: 64px;
  }
  .d-grid {
    bottom: 0;
    display: none;
    grid-gap: var(--d-grid-margin);
    grid-template-columns: repeat(12, 1fr);
    opacity: 0.5;
    padding: 0 var(--d-grid-margin);
    pointer-events: none;
    position: fixed;
    margin: auto;
    max-width: 100%;
    top: 0;
    width: 1920px;
    z-index: 9999;
  }
  .d-grid.is-visible {
    display: grid;
  }
  .d-grid > div {
    background: fuchsia;
    /*
    border-left: 1px solid yellow;
    border-right: 1px solid yellow; 
    */
    text-align: center;
  }
</style>

<script>
  window.addEventListener('keydown', e => {
    if (e.ctrlKey && e.key === 'g') {
      document.querySelector('.d-grid').classList.toggle('is-visible');
    }
  });
</script>