Ipywidgets GridBox的grid_column/grid_row不生效，仅显示FlexBox布局

我正在学习Ipywidgets，想要创建一个如下所示的GridBox布局：

但实际显示的却是FlexBox样式：

已尝试Jupyter Lab、Jupyter Notebook、Google Colab等环境，重装过Ipywidgets且所有包均为最新版本，以下是我的代码：

from ipywidgets import Button, GridBox, Layout

bt1 = Button(
        description = 'Header',
        button_style = 'primary',
        layout = Layout(
           grid_column = '1 / 5',
           grid_row = '1 / 2'
        )            
    )

bt2 = Button(
    description = 'Left',
    button_style = 'info',
    layout = Layout(
        grid_column = '1 / 3',
        grid_row = '2 / 4'
    )
)

bt3 = Button(
    description = 'Right',
    button_style = 'info',
    layout = Layout(
        grid_column = '3 / 5',
        grid_row = '2 / 4'        
    )
)

bt4 = Button(
    description = 'Footer',
    button_style = 'primary',
    layout = Layout(
        grid_column = '1 / 5',
        grid_row = '4 / 5'
    )
)

box = GridBox(
    children = [bt1, bt2, bt3, bt4],
    style = {'border': '2px solid green'},
    layout = Layout(
        display='grid',  # <--- Add this line
        grid_template_columns='repeat(4, 1fr)',
        grid_template_rows='repeat(4, 1fr)',
        grid_row_gap='10px',
        grid_column_gap='10px',
        border='2px solid green',
        padding='10px'
    )
     )


box

问题原因与解决方法 #

核心问题是GridBox容器没有足够的宽度来渲染网格布局，导致子组件只能垂直排列，呈现出类似FlexBox的效果。只需在GridBox的layout中添加宽度设置即可解决。

修正后的代码：

from ipywidgets import Button, GridBox, Layout

bt1 = Button(
    description='Header',
    button_style='primary',
    layout=Layout(
        grid_column='1 / 5',
        grid_row='1 / 2'
    )            
)

bt2 = Button(
    description='Left',
    button_style='info',
    layout=Layout(
        grid_column='1 / 3',
        grid_row='2 / 4'
    )
)

bt3 = Button(
    description='Right',
    button_style='info',
    layout=Layout(
        grid_column='3 / 5',
        grid_row='2 / 4'        
    )
)

bt4 = Button(
    description='Footer',
    button_style='primary',
    layout=Layout(
        grid_column='1 / 5',
        grid_row='4 / 5'
    )
)

box = GridBox(
    children=[bt1, bt2, bt3, bt4],
    layout=Layout(
        display='grid',
        grid_template_columns='repeat(4, 1fr)',
        grid_template_rows='repeat(4, 1fr)',
        grid_row_gap='10px',
        grid_column_gap='10px',
        border='2px solid green',
        padding='10px',
        width='100%'  # 新增：让容器占据可用宽度
    )
)

box

关键调整说明：

• 添加width='100%'，确保GridBox容器有足够宽度来展开网格布局，避免因容器收缩导致子组件垂直排列。
• 移除重复的style={'border': '2px solid green'}，因为layout中已设置border属性，避免样式冲突。

如果需要更贴合预期的行高分布，也可以将grid_template_rows调整为repeat(5, 1fr)，让bt4的grid_row='4/5'对应明确的行范围，但核心解决点仍是容器宽度的设置。

内容的提问来源于stack exchange，提问作者Mohamad Osama