CSS Grid Layout

I notice that the css stored at [https://codepen.io/chriddyp/pen/bWLwgP.css] relies upon a skeleton style gird layout. I have been trying implement a classic display:grid layout with only partial success.

Is this type of css display supported?

Ian

Dash apps result in regular HTML elements that can be styled however you want. So for the most part, if you can do it with HTML/CSS, you can achieve it within Dash.

Hi @nedned ,

I attach a Dash example and a codepen example which give different outputs.
It looks like the display:grid format does not respect the grid tracks or span properly.

Dash Code

import dash
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(
className = ‘wrapper’,
children=[
html.Div(html.H1(
className=‘header-left’,
children=‘LEFT’
),),
html.Div(html.H2(
className=‘header-middle’,
children =‘MIDDLE’,
),),
html.Div(html.H1(
className = ‘header-right’,
children = ‘RIGHT’
),),
],
)

app.css.append_css({
‘external_url’: ‘http://127.0.0.1:8000/test-css.css’}) # locally served css file

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

test-css.css
.wrapper {
display: grid;
grid-template-columns: 20vw 12vw 32vw 32vw;
grid-template-rows: 12% 7% 58% 7%;
grid-gap: 4px;
border: 2px dashed rgba(114, 186, 94, 0.35);
}
.header-left {
grid-column: 1/3;
grid-row: 1/2;
border: 2px dashed rgba(114, 186, 94, 0.35);
text-align: left;
}
.header-middle {
grid-column: 3/4;
grid-row: 1/2;
border: 2px dashed rgba(114, 186, 94, 0.35);
text-align:center;
}
.header-right {
grid-column: 4/5;
grid-row: 1/2;
border: 2px dashed rgba(114, 186, 94, 0.35);
justify-content: end;
text-align:right;
}

codepen.io

LEFT

MID

RIGHT

Dash doesn’t intercept CSS or HTML at all. I recommend using your browser’s devtools and inspecting the HTML elements one by one to see what the differences between the versions are. Look at the rendered markup and at the inherited CSS properties.