Container
The container centers your content horizontally. It's the most basic layout element.
While containers can be nested, most layouts do not require a nested container.
Fluid
A fluid container width is bounded by the
maxWidth prop value.import * as React from 'react'; import CssBaseline from '@mui/material/CssBaseline'; import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; export default function SimpleContainer() { return ( <React.Fragment> <CssBaseline /> <Container maxWidth="sm"> <Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} /> </Container> </React.Fragment> ); }
<Container maxWidth="sm">Fixed
If you prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport, you can set the
fixed prop. The max-width matches the min-width of the current breakpoint.import * as React from 'react'; import CssBaseline from '@mui/material/CssBaseline'; import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; export default function FixedContainer() { return ( <React.Fragment> <CssBaseline /> <Container fixed> <Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} /> </Container> </React.Fragment> ); }
<Container fixed>
