问题
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>
回答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.
来源：https://stackoverflow.com/questions/52943177/how-to-use-the-grid-list-in-angular-material-so-that-all-page-content-is-displa