Nested dash-split dashboard

Dash Python
1

I’ve been trying for a while to create a dashboard divided into three main parts like so:

grid
grid878×495 13.9 KB

  1. My first approach was with only css.
    I could not make it work because it overflows the container div, while the inner ones do not grow/shrink the same way as their neighbors do.

  2. So I tried to use dash-draggable. However it suffers from a … let’s say very limited documentation and is ultimately not made for my requirements, I think.

  3. The approach I’m currently working on is to use dash-split. It works well for simple splits but not for nested ones like I intend to do.

import dash
from dash_split import Split
from dash import html

app = dash.Dash(__name__)

style = {
    "height": "50vh",
    "display": "flex",
    "justifyContent": "center",
    "alignItems": "center"
}

app.layout = html.Div([
    Split(
        id='split-vertical', 
        direction='vertical', 
        children=[
                Split(
                    id='split',
                    children=[
                        html.Div(id='2', children="main graph", style=style),
                        html.Div(id='3', children="settings",, style=style),
                    ]),
            html.Div(id='1', children="some grid", style=style),
    ])
])

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

Anyone with an idea (or a completely different approach)?
I also tried to implement Split.js manually into dash which faced the same problems.