Add type and breakpoint props to Grid

[namakshenas]

PR / add type and breakpoint props to Grid / #428

[github-actions]

Test Environment for snehilvj/dash-mantine-components-473
Updated on: 2025-01-09 18:02:31 UTC

[namakshenas]

Here is the test:
https://py.cafe/namakshenas/dmc-type-grid

app.py:

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",
}

component = html.Div(
    children=[
        dmc.Grid(
            children=[
                dmc.GridCol(html.Div("1", style=style), span=4),
                dmc.GridCol(html.Div("2", style=style), span=4),
                dmc.GridCol(html.Div("3", style=style), span=4),
                dmc.GridCol(html.Div("4", style=style), span=4),
                dmc.GridCol(html.Div("5", style=style), span=4),
            ],
            gutter="xl",
            type="container",
            breakpoints={
                "xs": "100px",
                "sm": "200px",
                "md": "300px",
                "lg": "400px",
                "xl": "500px",
            },
        ),
        dmc.Space(h=40),
        dmc.Grid(
            children=[
                dmc.GridCol(html.Div("1", style=style), span=4),
                dmc.GridCol(html.Div("2", style=style), span=4),
                dmc.GridCol(html.Div("3", style=style), span=4),
                dmc.GridCol(html.Div("4", style=style), span=4),
                dmc.GridCol(html.Div("5", style=style), span=4),
            ],
            gutter="xl",
            type="media",
            breakpoints={
                "xs": "100px",
                "sm": "200px",
                "md": "300px",
                "lg": "400px",
                "xl": "500px",
            },
        ),
    ]
)

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

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

I was not able to spot any diff between "media" and "container" types.

[AnnMarieW]

In order to see the difference, as a test it's necessary to wrap the container in a div like I mentioned in you SimpleGrid PR.

Here's what the demo should look like. When you change the size of the container, the layout changes without changing the size of the browser

window

[AnnMarieW]

Try changing the pycafe app to 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",
}

component = html.Div(
    dmc.Grid(
        children=[
            dmc.GridCol(html.Div("1", style=style), span={"base": 12, "md": 6, "lg": 3}),
            dmc.GridCol(html.Div("2", style=style), span={"base": 12, "md": 6, "lg": 3}),
            dmc.GridCol(html.Div("3", style=style), span={"base": 12, "md": 6, "lg": 3}),
            dmc.GridCol(html.Div("4", style=style), span={"base": 12, "md": 6, "lg": 3}),
            dmc.GridCol(html.Div("5", 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 },
)

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

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

[namakshenas]

@AnnMarieW Thanks! Updated the app in pycafe.

[AnnMarieW]

@namakshenas - Looks good. Just need a changelog and this is ready to merge too. Thanks! 💃

[namakshenas]

@AnnMarieW
Changelog updated