Dash bootstrap how to split the app layout

I am having some trouble to achieve the layout in the image below. What is left is for me is to add those 3 graphs that I included in blue.

So far, I have included everything in 1 row using up all 12 columns:

Col 1: with dropdowns and checklists → width=2 Col 2 → 12: all those cards/boxes on top. Now if I move to create a new row, I will get the graphs to be below the section on the left (so there will be this huge whitespace in the middle).

Col 1 can be bigger or smaller in size depending on the user choice. I want to make it independent, meaning no matter the size of it I want all the rest to be display like I have on the image here.

My simplified code:

layout = dbc.Container([
dbc.Row([
    dbc.Col([
        dbc.Card([
            dbc.CardHeader('Portfolio Summary', style={'font-size': 20, 'textAlign': 'center', 'background-color': '#006398', 'color': 'white', 'font-weight': 'bold'}),
            html.Label('Region:', style={'margin-left': '10px', 'font-size': 18, 'color': 'white', 'font-weight': 'bold'}),
            dcc.RadioItems(id='region_radio',
                           options=[{'label': str(c), 'value': c} for c in sorted(df['Region'].unique())],
                           labelStyle={'display': 'block'},
                           inputStyle={'margin-right': '5px'},
                           style={'margin-left': '10px', 'margin-top': '0px', 'font-size': 15, 'color': 'white'}),
            html.Label('Country:', style={'margin-left': '10px', 'font-size': 18, 'color': 'white', 'font-weight': 'bold'}),
            dcc.Checklist(id='country_checklist', className='checkbox',
                          value=[],
                          labelStyle={'display': 'block'},
                          inputStyle={'margin-right': '5px'},
                          style={'margin-left': '10px', 'font-size': 15, 'color': 'white'}
                         ),
            html.Label('City:', style={'margin-left': '10px', 'font-size': 18, 'color': 'white', 'font-weight': 'bold'}),
            dcc.Checklist(id='city_checklist', className='checkbox',
                          labelStyle={'display': 'block'},
                          inputStyle={'margin-right': '5px'},
                          style={'margin-left': '10px', 'font-size': 15, 'color': 'white'}
                         ),
            html.Label('Property Type:', style={'margin-left': '10px', 'font-size': 18, 'color': 'white', 'font-weight': 'bold'}),
            dcc.Checklist(id='property_type_checklist', className='checkbox',
                          labelStyle={'display': 'block'},
                          inputStyle={'margin-right': '5px'},
                          options=[{'label': str(c), 'value': c} for c in sorted(df['Building Type'].unique())],
                          style={'margin-left': '10px', 'font-size': 15, 'color': 'white'}
                          ),
            html.Label('Ownership Type:', style={'margin-left': '10px', 'font-size': 18, 'color': 'white', 'font-weight': 'bold'}),
            dcc.Checklist(id='ownership_type_checklist', className='checkbox',
                          labelStyle={'display': 'block'},
                          inputStyle={'margin-right': '5px'},
                          options=[{'label': str(c), 'value': c} for c in sorted(df['Ownership Type'].unique())],
                          style={'margin-left': '10px', 'font-size': 15, 'color': 'white'}
                          ),
            dbc.Button("Submit", id='submit_button', color="light", className="d-grid gap-2 col-6 mx-auto"),
            dbc.Button("Clear All", color="dark", className="d-grid gap-2 col-6 mx-auto", href='/'),
        ], style={'margin-left': '-10px', 'background-color': '#006398'})
    ], width=2),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Countries', className='card-title'),
                    html.P(id='country_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-globe', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ],style={'margin-top': '-23px'}, width=1),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Cities', className='card-title'),
                    html.P(id='city_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-city', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ], style={'margin-top': '-23px'}, width=1),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Properties', className='card-title'),
                    html.P(id='property_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-building', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ], style={'margin-top': '-23px'}, width=1),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Annual Rent', className='card-title'),
                    html.P(id='rent_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-coins', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ], style={'margin-top': '-23px'}, width=2),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Total Area', className='card-title'),
                    html.P(id='area_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-expand', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ], style={'margin-top': '-23px'}, width=1),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Rent/Area', className='card-title'),
                    html.P(id='rent_area_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-money-bill', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ], style={'margin-top': '-23px'}, width=1),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Headcount', className='card-title'),
                    html.P(id='headcount_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-user', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ], style={'margin-top': '-23px'}, width=1),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Deskcount', className='card-title'),
                    html.P(id='deskcount_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-couch', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ], style={'margin-top': '-23px'}, width=1),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Cost/Person', className='card-title'),
                    html.P(id='cost_person_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-user-tag', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ], style={'margin-top': '-23px'}, width=1),
]),

], fluid=True)

Answer

You can nest rows/cols to get the layout you’re requesting.

import dash
from dash import dcc, html
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

graph = dcc.Graph(figure={
    'data': [
        {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
        {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
    ],
    'layout': {
        'title': 'Dash Data Visualization',
    },
}, responsive=True, className="h-100")

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(html.Div("stuff", className="bg-secondary h-100"), width=2),
        dbc.Col([
            dbc.Row([
                dbc.Col([html.Div("header", className="bg-primary")]),
                dbc.Col([html.Div("header", className="bg-primary")]),
                dbc.Col([html.Div("header", className="bg-primary")]),
                dbc.Col([html.Div("header", className="bg-primary")], width=4)
            ]),
            dbc.Row([
                dbc.Col([graph]),
            ]),
            dbc.Row([
                dbc.Col([graph]),
            ]),
        ], width=5),
        dbc.Col([
            dbc.Row([
                dbc.Col([html.Div("header", className="bg-primary")]),
                dbc.Col([html.Div("header", className="bg-primary")]),
                dbc.Col([html.Div("header", className="bg-primary")]),
                dbc.Col([html.Div("header", className="bg-primary")]),
                dbc.Col([html.Div("header", className="bg-primary")]),
            ]),
            dbc.Row([
                dbc.Col([graph]),
            ], className="h-100"),
        ], width=5),
    ])
], fluid=True)

app.run_server(debug=True)