How to use the grid-list in Angular Material, so t

Question

I use Angular 6 and Material 6.4.7. I need to implement the grid-list on the main page. Make it so that the header and footer have a fixed width, and content occupies the rest of the space. How do I do this?

<mat-grid-list cols="1">
<mat-grid-tile-header>
    <app-header></app-header>
</mat-grid-tile-header>
<mat-grid-tile>
    <router-outlet></router-outlet>
</mat-grid-tile>
<mat-grid-tile-footer>
    <app-footer></app-footer>
</mat-grid-tile-footer>

Answer 1

MatGridList is not a layout tool! It is a component for displaying a list of tiles in a flexible grid format.

Based on your description, what you want to achieve is fairly easy with standard HTML and CSS flexbox. If you need more flexibility or a responsive layout, look into Angular Flex-Layout.