FUSE
DOCS
Nextjs
Reference
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>