Angular flex code that produces unexpected results.

<div gdAreas="withGrid | withoutGrid" gdGap="2rem">

        <div gdArea="withGrid"
            gdAreas.gt-sm="page1 page2 page3"
            gdAreas.lt-md="page1"
            gdColumns.gt-sm="10rem 10rem 10rem"
            gdColumns.lt-md="10rem"
            gdGap="1rem">

          <div gdArea="page1" fxShow [fxShow.lt-md]="true"
              gdAreas="area1 | area2 | area3" gdGap="1rem"
              gdColumns="10rem">

            <div gdArea="area1" fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:green;">in a grid</div>
            <div gdArea="area2" fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:green;">in a grid</div>
            <div gdArea="area3" fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:green;">in a grid</div>

          </div>

          <div gdArea="page2" fxShow [fxShow.lt-md]="false"
              gdAreas="area1 | area2 | area3" gdGap="1rem"
              gdColumns="10rem">

            <div gdArea="area1" fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:blue;">in a grid</div>
            <div gdArea="area2" fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:blue;">in a grid</div>
            <div gdArea="area3" fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:blue;">in a grid</div>

          </div>

          <div gdArea="page3" fxShow [fxShow.lt-md]="false"
              gdAreas="area1 | area2 | area3" gdGap="1rem"
              gdColumns="10rem">

            <div gdArea="area1" fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:red;">in a grid</div>
            <div gdArea="area2" fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:red;">in a grid</div>
            <div gdArea="area3" fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:red;">in a grid</div>

          </div>

        </div>

        <div gdArea="withoutGrid"
            gdAreas.gt-sm="page1 page2 page3"
            gdAreas.lt-md="page1"
            gdColumns.gt-sm="10rem 10rem 10rem"
            gdColumns.lt-md="10rem"
            gdGap="1rem">

          <div gdArea="page1" fxShow [fxShow.lt-md]="true">

            <div  fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:green;margin:0 0 1rem 0;">not in a grid</div>
            <div  fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:green;margin:0 0 1rem 0;">not in a grid</div>
            <div  fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:green;">not in a grid</div>

          </div>

          <div gdArea="page2" fxShow [fxShow.lt-md]="false">

            <div  fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:blue;margin:0 0 1rem 0;">not in a grid</div>
            <div  fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:blue;margin:0 0 1rem 0;">not in a grid</div>
            <div  fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:blue;">not in a grid</div>

          </div>

          <div gdArea="page3" fxShow [fxShow.lt-md]="false">

            <div  fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:red;margin:0 0 1rem 0;">not in a grid</div>
            <div  fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:red;margin:0 0 1rem 0;">not in a grid</div>
            <div  fxLayout="row" fxLayoutAlign="center center" style="height:3rem;background-color:red;">not in a grid</div>

          </div>

        </div>

      </div>