How to modify layout in Dash with python

Question

I am using dash in python I want to make a layout as shown in the image below where everything fits on 1 page or 1 1/2 page, I tried to achieve it by coding the following, but I cannot get it. because I am not able to change the size of the column in the layout any help will be appreciated. Thank you.

The gauge plot I am talking about is this. https://plotly.com/python/bullet-charts/

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html

global Mode

external_stylesheets = [dbc.themes.BOOTSTRAP, 'https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, suppress_callback_exceptions=True, external_stylesheets=external_stylesheets)

app.layout = html.Div([html.Div([
    dbc.Card(
        dbc.CardBody([
            dbc.Row([
                dbc.Col([
                    dbc.Row([dcc.Graph(id='plot1', style={'text-align': 'left', 'display': 'inline-block',
                                                          'background-color': 'black', 'width': '100vh',
                                                          'height': '28vh'}, ), ], style={'height': '20vh'}),
                    dbc.Row([dcc.Graph(id='plot2', style={'text-align': 'left', 'display': 'inline-block',
                                                          'background-color': 'black', }, )],
                            style={'width': '10vh', 'height': '30vh'}),
                    dbc.Row([dcc.Graph(id='plot3', style={'text-align': 'left', 'display': 'inline-block',
                                                          'background-color': 'black', }, )],
                            style={'width': '10vh', 'height': '30vh'})
                ], style={
                    'align': 'left',
                }),
                dbc.Col([dbc.Col([dcc.Graph(id='plot4', style={'text-align': 'left', 'display': 'inline-block',
                                                               'background-color': 'black'})], )], style={
                    'align': 'left',
                }),
                dbc.Col([
                    dcc.Graph(id='plot5',
                              style={'text-align': 'left', 'display': 'inline-block', 'background-color': 'black'}),
                ]),

            ]),
            dbc.Row([
                dbc.Col([dcc.Graph(id='plot6', style={'text-align': 'left', 'display': 'inline-block',
                                                      'background-color': 'black'}), ]),
                dbc.Col([dcc.Graph(id='plot7', style={'text-align': 'left', 'display': 'inline-block',
                                                      'background-color': 'black'}), ]),
                dbc.Col([dcc.Graph(id='plot9',
                                   style={'text-align': 'left', 'display': 'inline-block', 'background-color': 'black',
                                          'width': '110vh', 'height': '30vh'})]),
            ], ),
            dbc.Row([
                dbc.Col([dcc.Graph(id='plot10', style={'display': 'inline-block', 'width': '70vh', 'height': '40vh'}),
                         ]),

                dbc.Col([dcc.Graph(id='plot12',
                                   style={'display': 'inline-block', 'width': '50vh', 'height': '40vh',
                                          'marginLeft': '7%', }),
                         ]),
            ]),
        ])),
])
])

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

Answer 1

I guess you have to do 3 rows with 2 columns each and add rows to them, like below.

• Row1
  • Col1
    • Row 1 - Plot 1
    • Row 2 - Plot 2
    • Row 3 - Plot 3
  • Col2
    • Row 1 - Plot 4
• Row2
  • Col1
    • Row 4 - Plot 5
    • Row 5 - Plot 6
    • Row 6 - Plot 7
  • Col2
    • Row 1 - Plot 4
• Row3
  • Col1
    • Row 7 - Plot 9
  • Col2
    • Row 3 - Plot 10

Not sure if I understood your requirement correctly.