Por alguma razão, dois intervalos de entrada estão centralizando os dois itens principais da grade.

Estou assumindo que isso se deve ao estilo DOM da sombra. Este é realmente o caso?

Alguém sabe por que os intervalos estão centralizando os itens A e B?

Aqui está um codepen.

body { margin: 0; background: #0d0d0d; }

#center{width:2px;height:100%;position:absolute;left:calc(50% - 1px);background:red;}

#grid {
  width: 80%;
  height: 30%;
  position: absolute;
  top: 35%;
  left: 10%;
  display: grid;
  grid-template-areas:
    "a a b b"
    "c c c d"
    "e e e f"
    "g g g g"
    ;
  grid-gap: 10px;
  color: #fff;
  box-sizing: border-box;
  border: dotted yellow 1px;
}

#a, #b { display: flex; justify-content: center; align-items: center; }

#a, #b, #d, #f, #g { background: #1a1a1a; }

#a { grid-area: a; }
#b { grid-area: b; }
#c { grid-area: c; }
#d { grid-area: d; }
#e { grid-area: e; }
#f { grid-area: f; }
#g { grid-area: g; }

<div id="center"></div>
<div id="grid">
  <div id="a">A</div>
  <div id="b">B</div>
  <input type="range" id="c">
  <div id="d"></div>
  <input type="range" id="e">
  <div id="f"></div>
  <div id="g">&nbsp;</div>
</div>