## Grid  
Responsive 12 columns grid system  
Category: Layout  

### Usage

Use Grid component to create layouts with a flexbox grid system.

```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("1", style=style), span=6),
        dmc.GridCol(dmc.Box("2", style=style), span=3),
        dmc.GridCol(dmc.Box("3", style=style), span=3),
    ],
    gutter="xl",
)
```
### Columns span
`The GridCol` `span` prop controls the ratio of column width to the total width of the row. By default, grid uses 
12 columns layout, so `span` prop can be any number from 1 to 12.

Examples:
```python
dmc.GridCol(span=3)  # 3 / 12 = 25% of row width
dmc.GridCol(span=4)  # 4 / 12 = 33% of row width
dmc.GridCol(span=6)  # 6 / 12 = 50% of row width
dmc.GridCol(span=12) # 12 / 12 = 100% of row width
```
`span` prop also supports dictionary syntax to change column width based on viewport width, it accepts `xs`, `sm`, `md`,
`lg` and `xl` keys and values from 1 to 12. The syntax is the same as in `style` props.

In the following example `span={'base': 12, 'md': 6, 'lg': 3`}:

- `base` – 12 / 12 = 100% of row width when viewport width is less than `md` breakpoint
- `md` – 6 / 12 = 50% of row width when viewport width is between md and `lg` breakpoints
- `lg` – 3 / 12 = 25% of row width when viewport width is greater than `lg` breakpoint


```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("1", style=style), span={"base": 12, "md": 6, "lg":3}),
        dmc.GridCol(dmc.Box("2", style=style), span={"base": 12, "md": 6, "lg":3}),
        dmc.GridCol(dmc.Box("3", style=style), span={"base": 12, "md": 6, "lg":3}),
        dmc.GridCol(dmc.Box("4", style=style), span={"base": 12, "md": 6, "lg":3}),
    ],
)
```
### Gutter 

Set `gutter` prop to control spacing between columns. The prop works the same way as `style` props – you can reference
theme.spacing values with `xs`, `sm`, `md`, `lg` and `xl` strings and use dictionary syntax to change gutter based on
viewport width.  You can also set gutter to a number to set spacing in px.

```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("1", style=style), span=4),
        dmc.GridCol(dmc.Box("2", style=style), span=4),
        dmc.GridCol(dmc.Box("3", style=style), span=4),
    ],
    gutter={ "base": 5, "xs": "md", "md": "xl", "xl": 50 },
)
```
### Grow

Set `grow` prop on Grid to force last row to take 100% of container width.

### Column Offset

Set `offset` prop on `GridCol` component to add gaps to the grid. `offset` prop supports the same syntax as span
prop: a number from 1 to 12 or a dictionary with `xs`, `sm`, `md`, `lg` and `xl` keys and values from 1 to 12.

```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("1", style=style), span=3),
        dmc.GridCol(dmc.Box("2", style=style), span=3),
        dmc.GridCol(dmc.Box("3", style=style), span=3, offset=3),
    ],
    gutter="xl",
)
```
### Order
Set the `order` prop on `GridCol` component to change the order of columns. `order` prop supports the same syntax as
`span` prop: a number from 1 to 12 or a dictionary with `xs`, `sm`, `md`, `lg` and `xl` keys and values from 1 to 12.


```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("2", style=style), span=3, order={"base": 2, "sm": 1, "lg": 3}),
        dmc.GridCol(dmc.Box("3", style=style), span=3, order={"base": 3, "sm": 2, "lg": 2}),
        dmc.GridCol(dmc.Box("1", style=style), span=3, order={"base": 1, "sm": 3, "lg": 1}),
    ],
)
```
### Multiple rows

Once children columns span and offset sum exceeds `columns` prop (defaults to 12), columns are placed on next row.

```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("1", style=style), span=4),
        dmc.GridCol(dmc.Box("2", style=style), span=4),
        dmc.GridCol(dmc.Box("3", style=style), span=4),
        dmc.GridCol(dmc.Box("4", style=style), span=4),
    ],
    gutter="xl",
)
```
### Justify and Align

Since grid is a flexbox container, you can control justify-content and align-items properties by using `justify` and 
`align` props respectively. Note the minimum height set on column 2 and 3.

```python
import dash_mantine_components as dmc

dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("1"), span=4),
        dmc.GridCol(dmc.Box("2", style={"minHeight":80}), span=4),
        dmc.GridCol(dmc.Box("3", style={"minHeight":120}), span=4),
    ],
    justify="center",
    align="stretch",

)
```

### Auto Sized Columns

All columns in a row with `span` or a `breakpoint` of `auto` will have equal size, growing as much as they can to fill the row.
In this example, the second column takes up 50% of the row while the other two columns automatically resize to fill the remaining space.

```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("span=auto", style=style), span="auto"),
        dmc.GridCol(dmc.Box("span=6", style=style), span=6),
        dmc.GridCol(dmc.Box("span=auto", style=style), span="auto"),
    ],
    gutter="xl",
)
```
### Fit Content

If you set `span` or a `breakpoint` to `content`, the column's size will automatically adjust to match the width of its content.

```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("content width", style=style), span="content"),
        dmc.GridCol(dmc.Box("2", style=style), span=6),
    ],
    gutter="xl",
)
```
### Change columns count
By default, grids uses 12 columns layout, you can change it by setting `columns` prop on `Grid` component. Note that
in this case, columns span and offset will be calculated relative to this value.

In the following example, first column takes 50% with 12 span (12/24), second and third take 25% (6/24):


```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("1", style=style), span=12),
        dmc.GridCol(dmc.Box("2", style=style), span=6),
        dmc.GridCol(dmc.Box("3", style=style), span=6),
    ],
    columns=24
)
```
### Container queries
To use [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) instead 
of media queries, set `type='container'`. With container queries, all responsive values are adjusted based on the
container width, not the viewport width.

Note that, when using container queries, it is also required to set `breakpoints` prop to the exact container width values.

To see how the grid changes, resize the root element of the demo with the resize handle located at the bottom right
corner of the demo:

```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Box(
    # Wrapper div is added for demonstration purposes only,
    # it is not required in real projects
    dmc.Grid(
        children=[
            dmc.GridCol(dmc.Box("1", style=style), span={"base": 12, "md": 6, "lg": 3}),
            dmc.GridCol(dmc.Box("2", style=style), span={"base": 12, "md": 6, "lg": 3}),
            dmc.GridCol(dmc.Box("3", style=style), span={"base": 12, "md": 6, "lg": 3}),
            dmc.GridCol(dmc.Box("4", style=style), span={"base": 12, "md": 6, "lg": 3}),
        ],
        gutter="xl",
        type="container",
        breakpoints={
            "xs": "100px",
            "sm": "200px",
            "md": "300px",
            "lg": "400px",
            "xl": "500px",
        },
    ),
    style={"resize": 'horizontal', "overflow": 'hidden', "maxWidth": '100%', "margin": 24 },
)
```
### overflow: hidden
By default, `Grid` has `overflow: visible` style on the root element. In some cases you might want to change it to
`overflow: hidden` to prevent negative margins from overflowing the grid container. For example, if you use `Grid` 
without parent container which has padding.

```python
dmc.Grid([
    dmc.GridCol("1", span=6),
    dmc.GridCol("2", span=6),
], overflow="hidden")
```


### 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.


#### Grid Selectors

| Selector   | Static selector            | Description                              |
|------------|-----------------------------|------------------------------------------|
| container  | .mantine-Grid-container     | Container element, only used with `type="container"` prop |
| root       | .mantine-Grid-root          | Root element                             |
| inner      | .mantine-Grid-inner         | Columns wrapper                          |
| col        | .mantine-Grid-col           | `Grid.Col` root element                  |

---

#### Grid CSS Variables

| Selector | Variable          | Description                      |
|----------|-------------------|----------------------------------|
| root     | --grid-overflow   | Controls `overflow` property     |
|          | --grid-align      | Controls `align-items` property  |
|          | --grid-justify    | Controls `justify-content` property |


### Keyword Arguments
#### Grid

- 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.

- align (optional):
    Sets `align-items`, `stretch` by default.

- 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.

- breakpoints (dict; optional):
    Breakpoints values, only applicable when `type="container"` is
    set, ignored when `type` is not set or `type="media"` is set.

    `breakpoints` is a dict with keys:

- 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.

- columns (number; optional):
    Number of columns in each row, `12` by default.

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

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

- grow (boolean; optional):
    Determines whether columns in the last row should expand to fill
    all available space, `False` by default.

- gutter (number; optional):
    Gutter between columns, key of `theme.spacing` or any valid CSS
    value, `'md'` by default.

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

- justify (optional):
    Sets `justify-content`, `flex-start` by default.

- 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.

- overflow (optional):
    Sets `overflow` CSS property on the root element, `'visible'` by
    default.

- 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.

- type (a value equal to: 'media', 'container'; optional):
    Determines typeof of queries that are used for responsive styles,
    `'media'` by default.

- variant (string; optional):
    variant.

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

- 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.

- 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.

- offset (number; optional):
    Column offset on the left side – number of columns that should be
    left empty before this column.

- order (number; optional):
    Column order, can be used to reorder columns at different viewport
    sizes.

- span (number; optional):
    Column span, `12` by default.

- 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`.