I’ve got multiple dmc.card items within a dash app layout. I’ve got them set to a specific height and width. I’ve also instilled base, sm, md, lg values to account for a responsive change in screen settings.

I’m trying to achieve the same response that the traditional dbc.Card performs. That is, when the screen size is reduced, the cards keep their same layout but reduce in width.

I don’t want the cards to split into separate rows.

Is there a way for dmc.card to operate the same way?

import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import plotly.express as px
import pandas as pd
import dash_mantine_components as dmc

external_stylesheets = [dbc.themes.COSMO, dbc.icons.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets = external_stylesheets)

carddbc = dbc.Card(
    [
        dbc.CardBody(
            [
                html.P('', className = 'card-text'),
            ]
        ),
    ], 
    style = {'height':'100%'}
)

card1 = dmc.Card(
    html.Div(children = [
        dcc.Checklist(['','','','',''], 
                     ),
    ],
    ),
    w={"base": 100, "sm": 180,"md": 300, "lg": 300},
    py={"base": "xs", "sm": "md", "lg": "xl"},
    bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"},
    withBorder=True,
    shadow='sm',
    radius='md',
    h=275,
)

card2 = dmc.Card(
    html.Div(children = [
        dcc.Checklist(['','','','',''], 
                     ),
    ],
    ),
    w={"base": 100, "sm": 180,"md": 300, "lg": 300},
    py={"base": "xs", "sm": "md", "lg": "xl"},
    bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"},
    withBorder=True,
    shadow='sm',
    radius='md',
    h=275,
)

card3 = dmc.Card(
    html.Div(children = [
        dcc.Checklist(['','','','',''], 
                     ),
    ],
    ),
    w={"base": 100, "sm": 180,"md": 300, "lg": 300},
    py={"base": "xs", "sm": "md", "lg": "xl"},
    bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"},
    withBorder=True,
    shadow='sm',
    radius='md',
    h=275,
)

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
        ], xs = 2, sm = 2, md = 2, lg = 2
        ),
        dbc.Col([
            dbc.Row([
                dbc.Col(carddbc, width = {'size':3}),
                dbc.Col(carddbc, width = {'size':3}),
                dbc.Col(carddbc, width = {'size':3}),
            ], justify = 'center'),
            dbc.Row([
                dbc.Col([
                ], xs = 4, sm = 4, md = 4, lg = 4),
                dbc.Col([
                    dbc.Card([
                    dbc.CardBody([
                        dbc.Row([
                            dbc.Col([
                                dcc.Graph()
                            ], 
                            ),
                            dbc.Row([
                            dbc.Col(html.Div(card1), className = ''),    
                            dbc.Col(html.Div(card2), className = ''),
                            dbc.Col(html.Div(card3), className = ''),
                            ]
                            )
                        ]),
                    ], 
                    )
                    ])
                ], xs = 8, sm = 8, md = 8, lg = 8),
            ])
        ], xs = 10, sm = 10, md = 10, lg = 10)
    ])
], fluid = True)


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