gridarea.ts

<grid [mdGrid]="[2,1]" [xsGrid]="[1,2]" ratio="[1,1]">
  <grid-area [mdArea]="[1,1,1,1]" [xsArea]="[1,1,1,1]"  class="grid-demo">
    <div class="area-heading d-flex justify-content-between flex-row align-items-center">
    <div class="d-flex">Heading</div>
    </div>
    <div class="area-content">
      Contents
    </div>
  </grid-area>
  
  <grid-area [mdArea]="[1,2,1,1]" [xsArea]="[1,2,1,1]"  class="grid-demo">
    <div class="area-heading d-flex justify-content-between flex-row align-items-center">
    <div class="d-flex">Heading</div>
    </div>
    <div class="area-content">
      Contents
    </div>
  </grid-area>  
</grid>

<!-- @Input() xsArea: Array<number>;  // 0 - 599 mobile
@Input() smArea: Array<number>;  // 600 - 959 Tablet
@Input() mdArea: Array<number> = [1,1,1,1];  // 960 - 1279 Desktop
@Input() lgArea: Array<number>;  // 1280 - 1919
@Input() xlArea: Array<number>; // 1920 -->