# CSS Grid layout - automatic graph scaling **URL:** \ **Category:** Dash Python\ **Created:** [December 11, 2018, 5:18pm UTC](https://community.plotly.com/t/css-grid-layout-automatic-graph-scaling/16804 "2018-12-11T17:18:27Z")\ **Posts on this page:** 3\ **Page:** 1
**Author:** ![bjonen](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bjonen/32/4925_2.png) [@bjonen](https://community.plotly.com/u/bjonen)\ **Post date:** [December 11, 2018, 5:18pm UTC](https://community.plotly.com/t/css-grid-layout-automatic-graph-scaling/16804/1 "2018-12-11T17:18:27Z")
Dear all, this question is a follow up to: > [@Can't seem to change default Height on Graph](https://community.plotly.com/t/cant-seem-to-change-default-height-on-graph/6742/28): > > Looking at this issue again, it seems like the “issue” is just inheritance. By default, the graph component isn’t “inheriting” the parent div’s height. So, this won’t work: html.Div([html.Div(style={'height': '50vh'}, children=dcc.Graph(figure={ 'data': [{ 'x': [1, 2, 3], 'y': [3, 1, 2] }] }, style={})), ]) but this will work: html.Div([ html.Div(style={'height': '50vh'}, children=dcc.Graph(figure={ 'data': [{ 'x': [1, … I am trying to work with dash and css grid layout. What I would like is to structure a grid in a central place and have all my graphs and tables fill the space in the grid areas. Unfortunately the grid layout does not explicitly set width/height on the different areas. At the same time the dash graphs adapt automatically to the width of the container but the height is fixed by default. Inheriting the height is not possible because the grid elements do not have height set explicitly. Is there another way to achieve this? Below a minimal example of what I would like to do. ```auto import dash import dash_core_components as dcc import dash_html_components as html app = dash.Dash( __name__ ) graph = dcc.Graph( id='example-graph', figure={ 'data': [ {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'}, {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montral'}, ], 'layout': { 'title': 'Dash Data Visualization' }, }, style={ # does not work in this context 'height': 'inherit', # 'width': '90vh', # 'height': '50vh' } ) app.layout = html.Div(className='wrapper', children=[ html.Div(className='header', children=[]), html.Div(className='leftCol', children=[]), html.Div(className='rightCol', children=[]), html.Div(className='midTop', children=[graph]), html.Div(className='midBottom', children=[]), html.Div(className='footer', children=[]), ]) ``` CSS: ```auto .wrapper { display: grid; grid-template-columns: 1fr 4fr 4fr 1fr; grid-template-rows: 15vh 50vh 20vh 8vh; grid-template-areas: "header header header header" "leftCol midTop midTop rightCol" "leftCol midBottom midBottom rightCol" "footer footer footer footer"; grid-gap: 5px; } .midTop{ grid-area: midTop; background-color: lightgrey; } ``` ---
**Author:** ![rumal0](https://avatars.discourse-cdn.com/v4/letter/r/e9c0ed/32.png) [@rumal0](https://community.plotly.com/u/rumal0)\ **Post date:** [November 25, 2019, 3:14pm UTC](https://community.plotly.com/t/css-grid-layout-automatic-graph-scaling/16804/2 "2019-11-25T15:14:49Z")
The specifics of why this works in my case, I don’t really know, but I can say that i made this work by fiddling with how the width and height of both the container and the columns and rows where defined. I’ve found that if I define the width of the grid container and rows in a percentage and the height of the same in viewWidth then scaling “just works”. Python layout example: ```auto html.Div( id="report-container", children=[ dcc.Graph( id="main-graph-container" ), dcc.Graph( id="related-graph" ), dcc.Graph( id="related-graph" ) ] ) ``` CSS: ```auto #report-container { position: relative; box-sizing: border-box; width: 100%; height: 50vw; padding: 1%; display: grid; grid-template-columns: repeat(6, 15.83333%); grid-template-rows: repeat(3, 15.3vw); gap: 1vw 1%; } .main-graph-container { grid-row: 1 / 3; grid-column: 2 / 5; } .related-graph { grid-column: 5 / 7; } ``` (Yes these calculations are hardcoded by hand - there should be a better way with custom variables if you take the time) The above breaks as soon as the dcc.Graph components are wrapped in anything. Even dcc.Loading components sadly. I’m still working on this, so any new insights I find I’ll share. ---
**Author:** ![wbrgss](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/wbrgss/32/3621_2.png) [@wbrgss](https://community.plotly.com/u/wbrgss)\ **Post date:** [November 25, 2019, 11:26pm UTC](https://community.plotly.com/t/css-grid-layout-automatic-graph-scaling/16804/3 "2019-11-25T23:26:24Z")
We’re considering a better solution for more “responsive” dcc.Graphs. You’re welcome to test this draft PR with `dcc.Graph(responsive=True, ...)`: > > > Fixes #605 > > \*\*Context\*\* > (1) Graph resize > Plotly.js provides graph resize on… \`window.resize\` event but does not provide graph resize on parent element resize. This is consistent with other similar libraries. > > Graph resize is affected by many props on the graph figure and config, namely: > \- \`figure.layout.autosize\`, \`figure.layout.height\`, \`figure.layout.width\` > \- \`config.responsive\` > > The overall behavior is complex and can be summarized by these checks: > https://github.com/plotly/dash-core-components/blob/605-graph-resize/tests/integration/graph/test\_graph\_responsive.py#L101 > https://github.com/plotly/dash-core-components/blob/605-graph-resize/tests/integration/graph/test\_graph\_responsive.py#L107 > > (2) Extendable figure/config processing in wrapped component > In certain use cases, the dcc.Graph is wrapped inside another component and provides a service rather than being the desired component itself. In these situations the wrapper component may want to override the graph's figure/config processing with logic of its own. > > (3) Graph resizing / loading / asyncing... not ready in general > In certain use cases, the application requires the dcc.Graph to be fully loaded, renderered, and resized before some other operation is made (e.g. QA / testing). > > \--- > > \*\*Proposed Changes\*\* > 1. Extend the resize behavior of the Plotly.js graph in Dash so as to apply it on parent resize that is not triggered by a window.resize event > 2. Allow users of Dash to override the behavior of the graph by passing a new prop \`responsive\` that will override the graph responsiveness. \`responsive\` allows 3 values: True, False, 'auto' (default) that will (True) force the graph to be responsive, (False) force the graph to be non-responsive, ('auto') use the graph's default behavior \*\*and\*\* make the graph responsive on parent resize if applicable > 3. Add two \`function\` props: \`\_dashprivate\_transformFigure\` and \`\_dashprivate\_transformConfig\` that will override default processing of \`figure\` and \`config\` (https://github.com/plotly/dash-core-components/blob/605-graph-resize/src/fragments/Graph.react.js#L142) > 4. The graph will re-evaluate the figure/config when \`\_dashprivate\_transformFigure\` or \`\_dashprivate\_transformConfig\` is updated (e.g. generate a new function when the params change) > 5. The component is responsible for making sure that the functions at 3 and 4 respect the immutability of figure and config. These values should be cloned and the modified clone returned by the function. > 6. Expose the graph's state by adding/removing a \`dash-graph--pending\` class to the wrapper div of the component > > \--- > > \*\* Changed unrelated to responsiveness \*\* > 1. While updating the Plotly.js version, used the opportunity to clean up the build process in regardsto the plotly.min.js dependency > > \--- > > \*\*Side-effects\*\* > 1. The addition of the resize observer div requires the graph div to be wrapped up with the resize observer div inside of another div for styling reasons. To preserve backward compatibility with previous selectors, the wrapper div will in addition of having the class \`dash-graph\`, have \`js-plotly-plot\`, the class added by Plotly.js on graph divs. > > \--- > > \*\*Dependencies and other considerations\*\* > 1. Requires https://github.com/plotly/plotly.js/pull/4392 to be released > 2. It was discussed and decided outside the scope of this PR discussion that graph resizing on parent element resize should not be handled by Plotly.js -- related historical items https://github.com/plotly/plotly.js/issues/3984, https://github.com/plotly/plotly.js/pull/2974 > 3. Testing for this feature is done by testing all combinations of (responsive, autoresize, height/width, dash responsive override) and making sure that the initial and resized graph have the expected size > 4. The solution must work in IE11 > > \--- > > \*\*Todo\*\* > \- \[x\] Unify graph state for (1) async, (2) 1st render, (3) resize -- for example \`dash-graph-pending\` flag / class -- need to validate the class gets added prior to the \`resize\` starting, there might be a need for deferring \`resize\` inside a \`setTimeout(..., 0)\` > \- \[x\] IE11 support? Seems to be 👌, changing \`flex\` into hard-coded heights and percentages, the graphs are responsive and all. > \- \[x\] docs (https://github.com/plotly/dash-docs/issues/720) -- tagged for \`v1.8\` also > > \--- > > Use variation of https://github.com/plotly/dash-core-components/blob/605-graph-resize/tests/integration/graph/test\_graph\_responsive.py#L23 to manually test scenarios. You can also try setting `responsive` to `True` in the `config` argument of `dcc.Graph`: ```auto dcc.Graph config={'responsive': True}, style={'height': '100%', 'width': '100%'} ) ``` > Inheriting the height is not possible because the grid elements do not have height set explicitly. It’s true that the grid elements don’t have height defined explicitly in CSS, but they still have real, rendered dimensions. So plotly.js should be using the final “calculated” height regardless. We’ve noticed some bugs with flexbox and grid, which the PR I posted above is also intended to help resolve.