Add type prop to SimpleGrid

[namakshenas]

PR / add type prop to SimpleGrid / #428

[github-actions]

Test Environment for snehilvj/dash-mantine-components-472
Updated on: 2025-01-09 17:32:59 UTC

[namakshenas]

https://py.cafe/namakshenas/dmc-type-simplegrid

[AnnMarieW]

Looks good! Is it running for you locally now too?

For the example, it's nice to be able to dynamically change the dimensions of the container like in the Mantine docs: https://mantine.dev/core/simple-grid/#container-queries

Can you update the component with the container query to wrap it in the div like this?:

import dash_mantine_components as dmc
from dash import Dash, html, _dash_renderer

_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL)

style = {
    "border": f"1px solid {dmc.DEFAULT_THEME['colors']['indigo'][4]}",
    "textAlign": "center",
}

html.Div(
    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="lg"
    ),
    style={"resize": 'horizontal', "overflow": 'hidden', "maxWidth": '100%' }
)


app.layout = dmc.MantineProvider([component])


if __name__ == "__main__":
    app.run(debug=True)

[namakshenas]

Looks good! Is it running for you locally now too?

For the example, it's nice to be able to dynamically change the dimensions of the container like in the Mantine docs: https://mantine.dev/core/simple-grid/#container-queries

Can you update the component with the container query to wrap it in the div like this?:

import dash_mantine_components as dmc
from dash import Dash, html, _dash_renderer

_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL)

style = {
    "border": f"1px solid {dmc.DEFAULT_THEME['colors']['indigo'][4]}",
    "textAlign": "center",
}

html.Div(
    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="lg"
    ),
    style={"resize": 'horizontal', "overflow": 'hidden', "maxWidth": '100%' }
)


app.layout = dmc.MantineProvider([component])


if __name__ == "__main__":
    app.run(debug=True)

Have you checked this?: https://py.cafe/namakshenas/dmc-type-simplegrid

ps. I'm unable to run it locally.

[AnnMarieW]

Yes, I saw your pycafe example, but it doesn't demonstrate the feature of container queries:

With container queries, grid columns and spacing will be adjusted based on the container width, not the viewport width.

Adding the extra div like I showed allows you to dynamically change the size of the container and the layout changes based on the container. Your example shows the columns changing based on the viewport.

But I did try it out with my change and it works fine. So if you add a changelog, I can merge this.

[namakshenas]

@AnnMarieW I updated the pycafe app according to your comment.

Also, updated the changelog.

[AnnMarieW]

Looks great! Thanks 💃