ComponentsLayout and structure
Grid
A twelve-column responsive grid. Choose it when items should line up in columns whose widths change with the screen size; for a single row or column of items, a stack is simpler.
Columns
Each MudItem takes a number of the twelve columns. xs="12" spans the whole row, 6 half of it, 4 a third.
Breakpoints
A width per breakpoint, from xs to xxl. Each applies from its breakpoint upwards until a larger one overrides it. Resize the window to watch the twelve items reflow.
One per row on phones, two from sm, three from md, four from lg, six from xl and twelve from xxl.
Spacing
Spacing sets the gutter between items in steps of 4 pixels, from 0 to 20. The default is 6, or 24 pixels.
Justify and align
Justify places items along the row when they do not fill it. The grid is a flex container, so the align-* utility classes align items of different heights. Every Justify value against every vertical alignment.
| Justify ↓ · AlignItems → | Start | Center | End | Stretch |
|---|---|---|---|---|
| FlexStart | ||||
| Center | ||||
| FlexEnd | ||||
| SpaceBetween | ||||
| SpaceAround | ||||
| SpaceEvenly |
Nested grids
An item can contain another MudGrid with its own twelve columns, here a reading-room dashboard.
Reading room today
142
Visitors18
Seats free37
Requests61
ReturnsNext talk
“Mapping the coastline, 1890–1910”, 16:00 in the map room.