## Container  
Container is the most basic layout element, it centers content horizontally and adds horizontal padding from theme.  
Category: Layout  

### Simple Example

Container is the most basic layout element, it centers content horizontally and adds horizontal padding from Mantine's 
theme.

Component accepts these props:

  * `size` – controls default max width 
  * `fluid` – overwrites size prop and sets max width to 100%

```python
import dash_mantine_components as dmc
from dash import html

style = {
    "height": 100,
    "border": "1px solid var(--mantine-color-blue-outline)",
    "marginTop": 20,
    "marginBottom": 20,
}

component = html.Div(
    children=[
        dmc.Container("Default container", style=style),
        dmc.Container(
            "xs container with xs horizontal padding", size="xs", px="xs", style=style
        ),
        dmc.Container(
            "200px container with 0px horizontal padding", size=200, px=0, style=style
        ),
    ]
)
```
### Fluid
Set `fluid` prop to make container fluid, it will take 100% of available width, it is the same as setting `size="100%"`.

```python
import dash_mantine_components as dmc
from dash import html


component = dmc.Container(
    "Fluid container has 100% max-width",
    fluid=True,
    h=50,
    bg="var(--mantine-color-blue-light)"
)
```
### Grid strategy

Starting from 2.2.0, `Container` supports `strategy="grid"` prop which enables more features.

Differences from the default `strategy="block"`:

- Uses `display: grid` instead of `display: block`
- Does not include default inline padding
- Does not set `max-width` on the root element (uses grid template columns instead)

Features supported by `strategy="grid"`:

- Everything that is supported by `strategy="block"`
- Children with `data-breakout` attribute take the entire width of the container's parent element
- Children with `data-container` inside `data-breakout` have the same width as the main grid column

Example of using breakout feature:


```python
import dash_mantine_components as dmc
from dash import html


component = dmc.Container(
    [
        dmc.Box("Main Content", bg="var(--mantine-color-indigo-light)", h=50),
        html.Div(
            [
                "Breakout",
                html.Div(
                    "Container inside breakout",
                    style={
                        "backgroundColor": "var(--mantine-color-indigo-filled)",
                        "color": "white",
                        "height": 50,
                    },
                    **{"data-container": ""}
                ),
            ],
            style={
                "backgroundColor": "var(--mantine-color-indigo-light)",
                "marginTop": 16,
            },
            **{"data-breakout": ""}
        ),
    ],
    size=500,
    strategy="grid",
)
```
**Note — Adding custom HTML attributes to Dash components:**

* For `dash-html-components`, you can add custom attributes using Python’s `**` unpacking syntax:

  ```python
  html.Div(**{"data-breakout": ""})
  ```

* For DMC components that support the [Styles API](/styles-api), use the `attributes` prop to pass attributes to elements of the component:

  ```python
  dmc.Paper(attributes={"root": "data-breakout"})
  ```




### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


#### Container Selectors

| Selector | Static selector            | Description   |
|----------|-----------------------------|---------------|
| root     | .mantine-Container-root     | Root element  |


#### Container CSS Variables

| Selector | Variable          | Description               |
|----------|-------------------|---------------------------|
| root     | --container-size  | Controls container max-width |




### Keyword Arguments
#### Container

- children (a list of or a singular dash component, string or number; optional)

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- fluid (boolean; optional):
    Determines whether the container should take 100% of its parent
    width. If set, `size` prop is ignored. `False` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- size (number; optional):
    Sets `max-width` of the container, value is not responsive – it is
    the same for all screen sizes. Numbers are converted to rem.
    Ignored when `fluid` prop is set. `'md'` by default.

- strategy (a value equal to: 'block', 'grid'; optional):
    Centering strategy. Default value: 'block'.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.