grid-template - почему это не умещается в один ряд?

Question

Есть три предмета. Почему бы им не поместиться в один ряд с тремя столбцами

    #grid {
      border: 1px solid black;
      display: grid;
      grid-template: 
        "a a a" 100px
    }
    #grid > div {
      background-color: red;
      padding: 0px;
      margin: 0px;
      border: 1px solid black;
    }

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

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

ОБНОВЛЕНИЕ: оно работает, как и ожидалось, в SO встроенной среде js / css / html. Он неожиданно работает как на jsfiddle, так и на codepen.

https://jsfiddle.net/97grq2pz/186/ https://codepen.io/matcheek/pen/EOgmzr https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template