Отзывчивость карты DMC - сюжетное тире ⇐ CSS

[Anonymous]

У меня есть несколько элементов dmc.card в макете приложения Dash. Я установил для них определенную высоту и ширину. Я также ввел значения base, sm, md, lg, чтобы учитывать быстрое изменение настроек экрана.
Я пытаюсь добиться того же отклика, что и традиционные dbc.Card работает. То есть при уменьшении размера экрана карточки сохраняют прежний макет, но уменьшаются в ширине.
Я не хочу, чтобы карточки разбивались на отдельные строки.Можно ли dmc.card работать таким же образом?
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)


Подробнее здесь: https://stackoverflow.com/questions/784 ... lotly-dash