Skip to main content

Grid

The Grid component in MUI v2 is used to create responsive and adaptive layouts with ease. Below are examples of how to use it in Python Dash.

import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.Grid(
          container=True,
          spacing=2,
          children=[
              dmc.Grid(
                  size=6,
                  children=html.Div(
                      "Grid Item 1",
                      style={
                          "backgroundColor": "#1976d2",
                          "padding": "16px",
                          "color": "white",
                          "textAlign": "center"
                      }
                  )
              ),
              dmc.Grid(
                  size=6,
                  children=html.Div(
                      "Grid Item 2",
                      style={
                          "backgroundColor": "#90caf9",
                          "padding": "16px",
                          "color": "black",
                          "textAlign": "center"
                      }
                  )
              ),
          ]
      )
    ])
  ]
)

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

Props Table​

Below are the main props available for the Grid component:

PropTypeDefaultDescription
containerbooleanfalseDefines whether the Grid is a container.
spacingnumber0Defines the spacing between items in the container.
sizenumberfalseDefines the size of the Grid item relative to the total columns.

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI Grid v2 Documentation