Htykuut

Created this stackblitz.

When it is in desktop and full screen the output loks good, but when the browser windows size is small, then one grid is overlapping over the other grid.

I want the grids to be 100% height so I can put my contents inside them and when the screen is small one grid should take the entire screen, i.e not more or less then the entire screen height minus the top navbar.

Not sure, but may be because of below css code. But if I remove these css code, I am not getting full screen grids. that means it looks like below

CSS:

.mat-drawer-content {

    position: absolute !important;

}



.mat-grid-list {

    height: 100%;

}



.mat-grid-list {

  position: initial !important;

}

IME it is very tricky - maybe impossible - to get around MatGrid's own layout mechanism and force it to behave a certain way using CSS or flex-layout, because the component is designed to be dynamically layed out using calculations. You've done it the right way with cols but you need to apply the same idea to rowHeight. Something like:

<mat-grid-list [cols]="breakpoint" [rowHeight]="ratio" (window:resize)="onResize($event)">



...



breakpoint: number;

ratio: string;

constructor(private el: ElementRef) { }



ngOnInit() {

  this.resize(window.innerWidth);

}



onResize(event) {

  this.resize(event.target.innerWidth);

}



resize(width: number) {

  if (width <= 400) {

    this.breakpoint = 1;

    this.ratio = this.el.nativeElement.offsetWidth + ':' + this.el.nativeElement.offsetHeight / 4;

  } else {

    this.breakpoint = 4;

    this.ratio = this.el.nativeElement.offsetWidth / 4 + ':' + this.el.nativeElement.offsetHeight;

  }

}

Note that you will also need to apply some sort of fixed height to the grid - perhaps via the parent container of the grid (in your case demo-component) and cause the grid to take the height of it's parent:

:host {

  height: 300px !important;

  align-self: stretch;

  flex: 1 0 100%;

  display: flex;

  justify-content: stretch;

  align-items: stretch;

}

.mat-grid-list {

  flex: 1 1 100%;

}

This isn't completely perfect, but it's much better. Here it is on StackBlitz.