005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
36 lines
896 B
Markdown
36 lines
896 B
Markdown
---
|
|
productId: system
|
|
title: React Container component
|
|
components: Container
|
|
githubLabel: 'component: Container'
|
|
---
|
|
|
|
# Container
|
|
|
|
<p class="description">The container centers your content horizontally. It's the most basic layout element.</p>
|
|
|
|
While containers can be nested, most layouts do not require a nested container.
|
|
|
|
{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
|
|
|
|
## Fluid
|
|
|
|
A fluid container width is bounded by the `maxWidth` prop value.
|
|
|
|
{{"demo": "SimpleContainer.js", "iframe": true, "defaultCodeOpen": false}}
|
|
|
|
```jsx
|
|
<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.
|
|
|
|
{{"demo": "FixedContainer.js", "iframe": true, "defaultCodeOpen": false}}
|
|
|
|
```jsx
|
|
<Container fixed>
|
|
```
|