Material design's responsive UI is based on a column-variate grid layout. It has 12 columns on desktop, 8 columns on tablet and 4 columns on phone.
CSS Class | Description |
---|---|
mat-layout-grid | Mandatory, for the layout grid element |
mat-layout-grid-inner | Mandatory, for wrapping grid cell |
mat-layout-grid-cell | Mandatory, for the layout grid cell |
mat-layout-grid-cell-span-$(NUMBER_OF_COLUMNS) | Optional, specifies the number of columns the cell spans. $(NUMBER_OF_COLUMNS): 1..12 |
mat-layout-grid-cell-span-$(NUMBER_OF_COLUMNS)-$(TYPE_OF_DEVICE) | Optional, specifies the number of columns the cell spans on a type of device. $(NUMBER_OF_COLUMNS): 1..12, $(TYPE_OF_DEVICE): (desktop, tablet, phone) |
mat-layout-grid-cell-order-$(INDEX) | Optional, specifies the order of the cell. $(INDEX): 1..12 |
mat-layout-grid-cell-align-$(POSITION) | Optional, specifies the alignment of cell. $(POSITION): (top, middle, bottom) |
mat-layout-grid-fixed-column-width | Optional, specifies the grid should have fixed column width |
mat-layout-grid-align-$(GRID_POSITION) | Optional, specifies the alignment of the whole grid. $(GRID_POSITION): (left, right) |
When your contents need extra structure that cannot be supported by single layout grid, you can nest layout grid within each other. To nest layout grid, add a new mat-layout-grid-inner to wrap around nested mat-layout-grid-cell within an existing mat-layout-grid-cell.
The nested layout grid behaves exactly like when they are not nested, e.g, they have 12 columns on desktop, 8 columns on tablet and 4 columns on phone. They also use the same gutter size as their parents, but margins are not re-introduced since they are living within another cell.
However, the Material Design guidelines do not recommend having a deeply nested grid as it might mean an over complicated UX.
This requires a max-width on the top-level grid element.
This requires a max-width on the top-level grid element.
Cell alignment requires a cell height smaller than the inner height of the grid.