GridSpec shenanigans

Moving question from gitter to here:

I’m struggelig to make GripSpec do what I want, and it is challenging to explain! However, below is the code that has gotten me closest to what I’m trying to acheive. The blue and green spacers represent the positions where I want to put plots, the red ones are spacers added to get the behaviour I want. So, firstly I want the blue spacer to always have an aspect ratio of 1, and the green spacer should have a max height of 300. With those restrictions the browser window will be split horizontally in half. In the lower half, the green spacer will span the whole width and fill the height up to 300. For the upper half, the blue spacer should be positioned in the center, fill the whole height, and fill the width to acheive aspect ratio of 1. With the below code this works partially, where I have also posted some gifs showing the behavior. When reducing the width of the browser, at some point the blue spacer starts to reduce more in size than necessary, because the red spacers seems to take precedence below that size. When changing the browser window height, the green spacer never changes.

Any input is greatly appreciated.

import panel as pn
import geoviews.tile_sources as gts
pn.extension()

grid_layout = pn.GridSpec(sizing_mode='stretch_both')
grid_layout[0,0] = pn.Spacer(background='#FF0000')
grid_layout[0,1] = pn.Spacer(background='blue', aspect_ratio=1)
grid_layout[0,2] = pn.Spacer(background='#FF0000')
grid_layout[1,:] = pn.Spacer(background='green', max_height=300)

grid_layout.servable()

In this gif: https://files.gitter.im/pyviz/pyviz/qIqg/not-ok-horizontal.gif I would expect the red spacers to shrink, allowing the blue spacer to fill the height while retaining aspect ratio of 1
This gif: https://files.gitter.im/pyviz/pyviz/qIqg/ok-vertical.gif seems right
Here: https://files.gitter.im/pyviz/pyviz/qIqg/not-ok-vertical.gif I would expect the green spacer to shrink

1 Like

I would like to add to this that I’ve also tried the following:

import panel as pn
pn.extension()

grid_layout = pn.GridSpec(sizing_mode='stretch_both',)
grid_layout[0,0] = pn.Spacer(background='red', margin=0)
grid_layout[0,1] = pn.Spacer(background='blue', margin=0)
grid_layout[1,:] = pn.Spacer(background='green', margin=0, max_height=300)

grid_layout.servable()

Here I would expect the spacers to evenly fit into the current browser window, but this is not the case. I’ve tried with both sizing_mode='stretch_both and sizing_mode='scale_both, these have different results, but not what I want. Please see images below.

sizing_mode='stretch_both'

sizing_mode='scale_both'

Still haven’t found a good solution here so I’m guessing it needs improvements to bokeh’s layout engine.