Angular2 Material Grid Full height

Question

I have started learning angular 2 material and it is very confusing because I cannot find many things in the documentation and official material.io css is written in terms of classes, whereas angular material uses "directive-like" objects.

I would like to simply make my grid full screen height (height 100%), but I can't find such simple example.

This is the most basic grid taken from angular2 material website, however, the row here is with fixed 1:1 ratio and not 100% height:

https://stackblitz.com/edit/angular-fp1akt-hotvqw?file=app/grid-list-overview-example.html

If I am not mistaken grid is the basic building block for layout in which other html elements will be added.

Answer 1

I suggest you to use FlexLayout from Angular. This is an independant library that allows you to manage all your position problem with efficiency.

This is more powerfull than the grid of material.

With Angular Material, this is top!

Answer 2

On the latest angular material, you can do as bellow:

<mat-grid-list cols="3" rowHeight="100%">
    <mat-grid-tile colspan="2" rowspan="1" style="background: grey;" ></mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1" style="background: blue;" ></mat-grid-tile>
</mat-grid-list>

Answer 3

I think you can achieve this with rowHeight: 'fit'.

Fit: Setting rowHeight to fit This mode automatically divides the available height by the number of rows. Please note the height of the grid-list or its container must be set.

See https://material.angular.io/components/grid-list/overview#setting-the-row-height