bokeh: グリッドレイアウトでグラフの幅が異なる場合の表示を確認した

# 環境
* Python 3.12.1
* bokeh 3.4.1


# 確認したいこと
3つのグラフをグリッドレイアウトで表示したいです。

https://docs.bokeh.org/en/latest/docs/examples/basic/layouts/grid.html#grid

グラフ`s1`,`s2`,`s3`を、以下のように2行2列のグリッドで表示します。

```
s1,s2
s3,empty
```

ただし`s1`と`s3`の幅は異なります。このとき、グリッドレイアウトがどう表示されるかを以下の点を変えて確認しました。

* [bokeh.layouts.grid](https://docs.bokeh.org/en/latest/docs/reference/layouts.html#grid)か[bokeh.layouts.gridlayout]か(https://docs.bokeh.org/en/latest/docs/reference/layouts.html#gridplot)
* 2行目を`[s3, None]`と指定するか、`[s3]`と指定するか

# Pythonスクリプト

散布図`s1`,`s2`の幅は200pxです。散布図`s3`だけ幅は300pxです。

```python:sample.py
from bokeh.layouts import gridplot, grid, layout, column
from bokeh.plotting import figure, show, save, output_file, reset_output
from bokeh.models.widgets.markups import Div


def create_scatters() -> tuple[figure, figure, figure]:
    x = list(range(11))
    y = x

    s1 = figure(background_fill_color="#fafafa", width=200, height=200)
    s1.scatter(x, y)

    s2 = figure(background_fill_color="#fafafa", width=200, height=200)
    s2.scatter(x, y)

    s3 = figure(background_fill_color="#fafafa", width=300, height=200)
    s3.scatter(x, y)

    return s1, s2, s3


# bokeh.layouts.grid
s1, s2, s3 = create_scatters()
output_file("grid-1.html")
save(grid([[s1, s2], [s3, None]]))


s1, s2, s3 = create_scatters()
output_file("grid-2.html")
save(grid([[s1, s2], [s3]]))


# bokeh.layouts.gridplot
s1, s2, s3 = create_scatters()
output_file("gridplot-1.html")
save(gridplot([[s1, s2], [s3, None]]))


s1, s2, s3 = create_scatters()
output_file("gridplot-2.html")
save(gridplot([[s1, s2], [s3]]))

```


# 結果
## `bokeh.layouts.grid`で出力する


### `grid-1.html`

```python
save(grid([[s1, s2], [s3, None]]))
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37903/cf6e455c-e3a6-4150-ef93-eb83d1e72520.png)

`s1`と`s2`の間に隙間ができました。




### `grid-2.html`

```python
save(grid([[s1, s2], [s3]]))
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37903/f21cb0e0-38c6-627a-5df2-fa3bc28d72be.png)

`s1`と`s2`の間に隙間はできませんでした。


## `bokeh.layouts.gridplot`で出力する
### `gridplot-1.html`

```python
save(gridplot([[s1, s2], [s3, None]]))
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37903/bceffcc8-d109-7c83-d518-ef49c57db0b3.png)

`s1`と`s2`の間に隙間ができました。

### `gridplot-2.html`

```python
save(gridplot([[s1, s2], [s3]]))
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37903/7b28f53f-5249-bcd9-5dfe-bcbcb6f011f1.png)

`s1`と`s2`の間に隙間ができました。

# 隙間が生まれるときと生まれないときでCSSはどう異なるのか
`grid([[s1, s2], [s3, None]])`を指定したときだけ、`s1`と`s2`の間に隙間ができませんでした。
隙間ができるときとできないときで、HTML/CSSがどう違うのかを確認しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37903/b7181df6-db22-b787-6f30-f53433739f18.png)

`grid-1.html`では、`s3`に相当する`<div class="bk-Figure" />`のスタイルは以下のようになっていました。

```css
grid-row-start: 2;
grid-row-end: span 1;
grid-column-start: 1;
grid-column-end: span 1;
```

一方`grid-2.html`では、`s3`に相当するdiv要素のスタイルは以下のようになっていました。

```css
grid-row-start: 2;
grid-row-end: span 1;
grid-column-start: 1;
grid-column-end: span 2;
```

`grid-column-end`の違いによって、隙間ができる/できないが変わることが分かりました。