Dash bootstrap components layout creation

Question

I want to create a layout for a dashboard using dash_bootstrap_components that looks like this:

+---+---+---+
|   | 2 | 3 |
| 1 |---+---+
|   |   4   |
+---+-------+

Is this possible? Can someone help me figure out how to do this? Thanks :)

I tried a number of ways of getting this to work but I have found the way that dash bootstrap components works limiting. I haven't been able to get any components to span multiple rows, such as "1" in the diagram.

Answer 1

It's just a matter of correctly identifying all the rows and columns in your grid.

I see the outer box as a single row containing two columns. The first column contains 1 the second column contains 2, 3 and 4. The second column can be further subdivided into rows and columns. Repeat the process until you've mapped all the rows and columns in your grid.

A very basic implementation of the idea using dash bootstrap components could look like this:

from dash import Dash, html
import dash_bootstrap_components as dbc

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

app.layout = html.Div([
  dbc.Row([
    dbc.Col(1),
    dbc.Col([
      dbc.Row([
        dbc.Col(2), 
        dbc.Col(3)
      ]), 
      dbc.Row(dbc.Col(4))
    ])
  ])
])

if __name__ == "__main__":
    app.run_server()

Without styling it's unclear without inspecting the page that it's working so I added some simple styles

.row, col {
  border: 1px solid black;
}