Using CSS Grid with Dash

Dash Python
1

I’m trying to use the CSS Grid display framework with a Dash app without much luck; is that possible? Is there a better way to divide the screen into different areas using Dash? I’m trying for a look and feel similar to this sample app:

https://dash-gallery.plotly.host/dash-oil-and-gas/

Thanks,

David

2

Here’s an article that helped me understand and implement the Oil and Gas grid system:

3

Another option would be dash-bootstrap-components, specifically the Row and Col components which let you make use of Bootstrap’s grid system.

4

Thanks to both of you for your quick replies. I looked at the hyperlink and tried to copy the code for the Boostrap CSS framework, but I’m not sure I’m doing it right. I’m trying to just have these two paragraphs side-by-side in a simple two column, one row layout; it runs, but the output is stacked, not side-by-side. Does anyone know what (probably simple) error I’m making?

(note that I have the s1.css file from the Oil/Gas app in the assets folder of my application).

[BEGIN CODE]

-- coding: utf-8 --

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(name)

app.layout = html.Div([
html.Div([
html.Div([
html.P(“Paragraph 1”)
], className=“one-third column”),
html.Div([
html.P(“Paragraph 2”)
], className=“two-thirds column”)
],
className=‘row flex-display’),
], className= “container”, style={‘display’: ‘flex’, ‘flex-direction’: ‘column’})

if name == ‘main’:
app.run_server(debug=True)

5

The sample code you posted doesn’t seem to use dash-bootstrap-components as far as I can see?

It’s very likely that Bootstrap CSS will clash with the Oil and Gas Stylesheet. I suggest using one or the other, but probably not both together.

If you use dash-bootstrap-components the layout you’re describing should be as simple as

dbc.Row(
    [
        dbc.Col(html.P(...), width=6),
        dbc.Col(html.P(...), width=6),
    ]
)

Make sure you link bootstrap when you create the app

import dash_bootstrap_components as dbc

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

Tom, thanks again; that worked!

1 Like