dash bootsrap card over multiple rows?

Question

so basically my question is since the way to do your layout with dbc is through "rows 1st, columns 2nd" whether it is possible to stretch one component over multiple rows. obviously the row size is adaptive but what i had in mind was something like this: so my main question is if i can add a card to my app that stretches over multiple rows (the vertical one in the middle) but still keeps the other columns of that row intact.

Edit:

i managed to get the layout i wanted but its still not 100% what i want. here is the relevant code and how it looks:

app.layout = html.Div([
    dbc.Row([
        dbc.Card([
            dbc.CardBody([
                html.H2('Dash Tabs component demo')
            ])
        ], className='text-center')
    ]),
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.H4('Dash Tabs component')
                ])
            ], className='text-center'),
            dbc.Row([
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                            html.H4('Dash Tabs component')
                        ])
                    ], className='text-center')
                ])
            ], className='pt-1')
        ]),
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.H4('Dash Tabs component'),
                    html.H4('Dash Tabs component')
                ])
            ], className='h-100 text-center')
        ]),
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.H4('Dash Tabs component')
                ], className='text-center')
            ]),
            dbc.Row([
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                            html.H4('Dash Tabs component')
                        ], className='text-center')
                    ])
                ]),
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                            html.H4('Dash Tabs component')
                        ], className='text-center')
                    ])
                ])
            ], className='pt-1')
        ])
    ], className='p-2 align-items-stretch'),
    content
])

as you can see i managed to get the overall layout done (even though the code looks pretty ugly).

the only thing bothering me now is that i cannot get the cards to have a fitting height while keeping a little padding between them, most notably the first column has more space at the bottom.

i got the classnames from this dbc cheatsheet and it certainly helped but the 'align' and 'justify' classnames didn't work at all for me.

so to sum it up i need all the cards to be aligned 'on the same level' in the row.

Answer 1

Not sure if I understand your question correctly, but if your goal is to always keep the layout the same as is in your initial picture, you can define this as the layout for the smallest screen size (e.g. with keyword argument xs for the dash columns, cf. Specify width for different screen sizes), so that the columns and rows won't be rearranged when you e.g. resize your browser window. So, for your layout, this would mean:

• initial row: use whole width
• second row: has three columns of the same width (max. column span is 12, so if you want three equally wide columns, each should have width 4 (xs=4)
• third column: contains a second row with again two columns that each use 50% of the width of the third column (so we put xs=6 for both of these columns)

Here a little bit more illustrative:

And here a working example:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html


app = dash.Dash(external_stylesheets=[dbc.themes.QUARTZ],
                meta_tags=[{'name': 'viewport', 'content': 'width=device-width, ''initial-scale=1'}])

server = app.server
app.config.suppress_callback_exceptions = True

app.layout = html.Div([
    dbc.Row([
        dbc.Card([
            dbc.CardBody([
                html.H2('Dash Tabs component demo')
            ])
        ], className='text-center')
    ]),
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.H4('Dash Tabs component 1')
                ])
            ], className='text-center'),
            dbc.Row([
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                            html.H4('Dash Tabs component 2')
                        ])
                    ], className='text-center')
                ])
            ], className='pt-1')
        ], xs=4),
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.H4('Dash Tabs component 3'),
                    html.H4('Dash Tabs component 4')
                ])
            ], className='h-100 text-center')
        ], xs=4),
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.H4('Dash Tabs component 5')
                ], className='text-center')
            ]),
            dbc.Row([
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                            html.H4('Dash Tabs component 6')
                        ], className='text-center')
                    ])
                ], xs=6),
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                            html.H4('Dash Tabs component 7')
                        ], className='text-center')
                    ])
                ], xs=6)
            ], className='pt-1')
        ], xs=4)
    ], className='p-2 align-items-stretch'),
    # content
])


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

I struggled with this as well and am not sure if this is the best way to do it. So, if anyone else has a better solution, I'd be happy to learn it!