ComponentsLayout and structure
Container
Centers content horizontally and caps its width. Use it for the main column of a page so lines stay readable on wide screens.
Maximum widths
MaxWidth caps the container from ExtraSmall (444 px) to ExtraExtraLarge (2560 px); False removes the cap. This preview is narrower than 960 px, so Medium and wider simply fill it.
MaxWidth.ExtraSmall
444 pxMaxWidth.Small
600 pxMaxWidth.Medium
960 pxMaxWidth.Large
1280 pxMaxWidth.ExtraLarge
1920 pxMaxWidth.ExtraExtraLarge
2560 pxMaxWidth.False
no limitGutters
Gutters, on by default, pads the content 16 pixels from the edges, 24 from the sm breakpoint. The dashed line marks the container; the filled band is its content.
Gutters true
Opening hours: Tuesday to Saturday, 9:00 to 17:30.
Gutters false
Opening hours: Tuesday to Saturday, 9:00 to 17:30.
A reading column
A realistic use: MaxWidth.Small keeps an article near 70 characters a line, centered in whatever space the layout gives it.
Observatory notes · 3 min read
Why the dome stays cold
A telescope sees best when its mirror matches the night air. Warm glass bends the light above it into shimmering currents, and stars that should be points swell into soft discs.
So the dome opens an hour before the first visitors arrive, and the heaters stay off. Bring a coat: the sharpest views of the evening come after the mirror has given up the last of the day's warmth.
Playground
Fixed snaps the maximum width to the minimum width of the current breakpoint instead of following the window smoothly; it shows only when the window is narrower than the cap. Resize the window to compare.
Container content
<MudContainer MaxWidth="MaxWidth.ExtraSmall">
…
</MudContainer>