使用带有CSS的网格容器正确配置仪表板布局

Question

我已经开始学习CSS，以便可以更改使用Dash构建的仪表板的布局。以下代码运行了我在其上练习的简单仪表板：

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()

app.layout = html.Div([
    dcc.Location(id = 'url', refresh = False),
    html.Div(id = 'page-content'),
])

def display_links():
    links = html.Div([
        dcc.Link('Page 1', href = '/page1'),
        dcc.Link('Page 2', href = '/page2')
    ])
    return links

page1 = html.Div([
    html.Div([
    html.Div([
        html.Div([
            dcc.Link('Go to page 1', href= '/page1')
        ], className = 'grid-item1'),
        html.Div([
            dcc.Link('Go to page 2', href= '/page2')
        ], className = 'grid-item2'),
        dcc.Graph(
            id = 'graph',
            figure = {
                'data':[
                    {'x': [1,2,3], 'y': [4,2,3]}
                ],
                'layout': {
                    'title': 'Graph'
                }
            }
        )
        ], className = 'grid-item3'),
        html.Div([
            html.Label('Dropdown 1'),
            dcc.Dropdown(id='dropdown-menu1')
        ], className = 'grid-item4'),
        html.Div([
            html.Label('Dropdown 2'),
            dcc.Dropdown(id='dropdown-menu2')
        ], className = 'grid-item5'),
        html.Div([
            html.Label('Slider 1'),
            dcc.Slider(
                id = 'slider1',
                min=0,
                max=4,
                value=0,
                marks={
                    0: {'label': '3 days'},
                    1: {'label': '1 week'},
                    2: {'label': '2 weeks'},
                    3: {'label': '1 month'},
                    4: {'label': '2 months'}
                }
            )
        ], className = 'grid-item6'),
        html.Div([
            html.Label('Radio items 1'),
            dcc.RadioItems(
                id = 'radio-item1',
                options = [
                    {'label': '1', 'value': 1},
                    {'label': '2', 'value': 2}
                ],
                value = 1
            )
        ], className = 'grid-item7')
    ], className = 'grid-container')
])

page2 = html.Div([
    html.H1('Page 2'),
    display_links()
])

@app.callback(dash.dependencies.Output('page-content','children'),
              [dash.dependencies.Input('url','pathname')])
def display_page(pathname):
    if pathname == '/':
        return page1
    if pathname == '/page1':
        return page1
    if pathname == '/page2':
        return page2
    else:
        return display_links()

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

经过this tutorial之后，我编写了以下CSS样式表：

.grid-container {
    display: grid;
    grid-gap: 10px;
}

.grid-item1 {
    grid-column: 1;
    grid-row: 1;
}

.grid-item2 {
    grid-column: 1;
    grid-row: 2;
}

.grid-item3 {
    grid-column: 2 / span 5;
    grid-row: 1 / span 2;
}

.grid-item4 {
    grid-column: 2;
    grid-row: 3;
}

.grid-item5 {
    grid-column: 3;
    grid-row: 3;
}

.grid-item6 {
    grid-column: 4;
    grid-row: 3;
}

.grid-item7 {
    grid-column: 5;
    grid-row: 3;
}

运行仪表板时，我看起来像这样：

尽管看起来不错，但这不是我想要的。我希望两个链接位于图表的左侧，并且我希望四个过滤器选项在图表下方均匀分布。像这样：

Link 1  |        Graph                Graph        |
Link 2  |        Graph                Graph        |
        | Filter 1 | Filter 2 | Filter 3 | Filter 4|

我基于此piece of code创建了CSS，但我不明白自己在做什么错。我正在使用5列3行的网格；链接1分配给第1列和第1行；链接2分配给第1列和第2行；该图被分配到第2列，直至第5列以及第1和第2行；这四个过滤器将分配给第3行的2、3、4和5列。

关于此布局，我有两个问题：

问题1：我在css / python代码中做错什么了，如何解决它以便仪表板具有所需的布局？

问题2：这是管理仪表板布局的正确/可接受的方法吗？如果不;我应该如何 设计仪表板布局？