## SimpleGrid  
Use SimpleGrid component to create a grid where each column takes equal width. You can use it to create responsive layouts.  
Category: Layout  

### Usage

`SimpleGrid` is a responsive grid system with equal-width columns. It uses CSS grid layout. If you need to set different
widths for columns, use `Grid` component instead.

### spacing and verticalSpacing props
`spacing` prop is used both for horizontal and vertical spacing if `verticalSpacing` is not set:

```python

# `spacing` is used for both horizontal and vertical spacing
dmc.SimpleGrid(spacing="xl")

# `spacing` is used for horizontal spacing, `verticalSpacing` for vertical
dmc.SimpleGrid(spacing="xl", verticalSpacing="lg")
```

### Responsive Props

`cols`, `spacing` and `verticalSpacing` props support object notation for responsive values, 
it works the same way as [style props](/style-props): the object may have `base`, `xs`, `sm`, `md`, `lg` and `xl` key, 
and values from those keys will be applied according to current viewport width.

`cols` prop can be understood from the below example as:

- 1 column if viewport width is less than `sm` breakpoint
- 2 columns if viewport width is between `sm` and `lg` breakpoints
- 5 columns if viewport width is greater than `lg` breakpoint

Same logic applies to `spacing` and `verticalSpacing` props.

Resize browser to see breakpoints behavior.

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

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

component = dmc.SimpleGrid(
    cols={"base": 1, "sm": 2, "lg": 5},
    spacing={"base": 10, "sm": "xl"},
    verticalSpacing={"base": "md", "sm": "xl"},
    children=[
        html.Div("1", style=style),
        html.Div("2", style=style),
        html.Div("3", style=style),
        html.Div("4", style=style),
        html.Div("5", style=style),
    ],
)
```
### 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, grid columns and spacing will be adjusted based on the
container width, not the viewport width.

Note that, when using container queries, `cols`, `spacing` and `verticalSpacing` props cannot reference `theme.breakpoints`
values in keys. It is required to use exact `px` or `em` 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
from dash import html

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

component = html.Div(
    # Wrapper div is added for demonstration purposes only,
    # it is not required in real projects
    dmc.SimpleGrid(
        type="container",
        cols={"base": 1, "300px": 2, "500px": 5},
        spacing={"base": 10, "300px": "xl"},
        children=[
            html.Div("1", style=style),
            html.Div("2", style=style),
            html.Div("3", style=style),
            html.Div("4", style=style),
            html.Div("5", style=style),
        ],
        p="xs",
    ),
    style={"resize": "horizontal", "overflow": "hidden", "maxWidth": "100%"},
)
```
### 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.


| Name        | Static selector          | Description                                      |
|:------------|:-------------------------|:-------------------------------------------------|
| root        | .mantine-SimpleGrid-root | Root element                                     |


### Keyword Arguments
#### SimpleGrid

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

- cols (number; optional):
    Number of columns, `1` 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.

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

- spacing (number; optional):
    Spacing between columns, `'md'` 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.

- verticalSpacing (number; optional):
    Spacing between rows, `'md'` by default.

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