MatBlazor - Material Design components for Blazor and Razor Components
21

Layout Grid

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 Classes
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)
Usage
Nested grid

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.

Second level
Second level
First level
First level
Columns
Grid Left Alignment

This requires a max-width on the top-level grid element.

Right Alignment

This requires a max-width on the top-level grid element.

Cell Alignment

Cell alignment requires a cell height smaller than the inner height of the grid.

If you like MatBlazor, please put a star on GitHub.