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;
}
