Grid area seems to be ignored, how do I get it working?

Question

I already read previous questions on number of columns. That doesn't seem to be the issue in mine.

Here's my code:

    #agenda div.item {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 2fr 1fr 1fr 1fr;
      grid-template-areas:
        "time h3 h3 h3 h3 aside"
        "span h3 h3 h3 h3 aside"
        "blank h3 h3 h3 h3 aside"
        "blank p p p blank blank";
    }

    div.item {
      margin: 1em;
      border: 1px solid grey;
      border-radius: 5px;
    }

    #agenda time,
    #agenda span,
    #agenda h3,
    #agenda p,
    #agenda aside {
      box-sizing: border-box;
      height: 100%;
      padding: .5em;
    }

    #agenda time {
      grid-area: "time";
      background: red;
    }

    #agenda span {
      grid-area: "span";
      background: green;
    }

    #agenda h3 {
      grid-area: "h3";
      margin: 0;
      background: blue;
    }

    #agenda p {
      grid-area: "p";
      margin: 0;
      background: orange;
    }

    #agenda aside {
      grid-area: "aside";
      background: yellow;
    }

  <section id="agenda">

    <div class="item">
      <time>10:00 AM ET</time>
      <h3>The Genius I Was Yesterday</h3>
      <aside>Output: Stuff</aside>
      <span>30 minutes</span>
      <p>Others: Observing</p>
    </div>

    <div class="item">
      <time>10:30 AM ET</time>
      <h3>BREAK</h3>
      <aside></aside>
      <span>15 minutes</span>
      <p>Others: Quick Huddle</p>
    </div>

  </section>

I also noticed the order matters. If I rearrange the HTML it doesn't reflow according to the grid-template-layout.