Need help with aligning dbc.Row/Col items

[ilazariev]

So, I have 3 Rows and 3 Cols, created using dash_bootstrap_components
Problem is, the first row contains not 3 elements, but 2. I want elements in first column to be same width, and the second element of the first row to be a length of 2 items + gap (to fill empty space left)
Currently done:

Code:

def layout():
    return html.Div(
        [
            html.H1("Overview"),
            dbc.Row(
                [dbc.Col(total_registered_subs()), dbc.Col(registered_subs_by_engagement)],
                justify="left",
                style={"margin-bottom": "20px"},
            ),
            dbc.Row([dbc.Col(total_registered_subs())] * 3, justify="left", style={"margin-bottom": "20px"}),
            dbc.Row([dbc.Col(total_registered_subs())] * 3, justify="left", style={"margin-bottom": "20px"}),
        ],
        style={"margin-left": "20px", "margin-right": "20px"},
    )

What I want to do is shown on next picture:

Any ideas would be helpful, as I’m only novice here :')

[AIMPED]

Hey @ilazariev , you can use the width of the columns to arrange your cards. The maximum colum width is 12, so in your case you have in the first row one column of widht=4, and an other column of width=8.

Here some code:

import dash_bootstrap_components as dbc
from dash import Dash, html

card = dbc.Card(
    [
        dbc.CardHeader("This is the header"),
        dbc.CardBody(
            [
                html.H4("Card title", className="card-title"),
                html.P("This is some card text", className="card-text"),
            ]
        ),
        dbc.CardFooter("This is the footer"),
    ],
    className='p-1'
)

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(card, width=4),
                dbc.Col(card, width=8),
            ],
            className="g-0"
        ),
        dbc.Row(
            [
                dbc.Col(card, width=4),
                dbc.Col(card, width=4),
                dbc.Col(card, width=4),
            ],
            className="g-0"
        ),
        dbc.Row(
            [
                dbc.Col(card, width=4),
                dbc.Col(card, width=4),
                dbc.Col(card, width=4),
            ],
            className="g-0"
        )
    ],
    fluid=True
)

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

More information:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/