GridStack

This component is also available in the classic reference.

The GridStack layout allows arranging multiple Panel objects in a grid using a simple API to assign objects to individual grid cells or to a grid span.

Use pn.ui.GridStack to create this component.

API

.. py:class:: GridStack(*, allow_drag, allow_resize, state, mode, ncols, nrows, objects, loading, align, aspect_ratio, css_classes, design, height, height_policy, margin, max_height, max_width, min_height, min_width, sizing_mode, styles, stylesheets, tags, visible, width, width_policy, name) :module: panel.layout.gridstack

The GridStack layout allows arranging multiple Panel objects in a grid using a simple API to assign objects to individual grid cells or to a grid span.

Other layout containers function like lists, but a GridSpec has an API similar to a 2D array, making it possible to use 2D assignment to populate, index, and slice the grid.

Reference: https://panel.holoviz.org/reference/layouts/GridStack.html

:Example:

pn.extension(‘gridstack’) gstack = GridStack(sizing_mode=’stretch_both’) gstack[ : , 0: 3] = pn.Spacer(styles=dict(background=’red’)) gstack[0:2, 3: 9] = pn.Spacer(styles=dict(background=’green’)) gstack[2:4, 6:12] = pn.Spacer(styles=dict(background=’orange’)) gstack[4:6, 3:12] = pn.Spacer(styles=dict(background=’blue’)) gstack[0:2, 9:12] = pn.Spacer(styles=dict(background=’purple’))

:Attributes:

   **height**
       ..

   **width**
       ..

.. !! processed by numpydoc !!

Parameter Definitions

---

Parameters inherited from:

   :class:`panel.viewable.Layoutable`: align, aspect_ratio, css_classes, design, min_width, min_height, max_width, max_height, margin, styles, stylesheets, tags, width_policy, height_policy, sizing_mode, visible

   :class:`panel.viewable.Viewable`: loading

   :class:`panel.layout.grid.GridSpec`: objects, mode, ncols, nrows

height = Integer(allow_None=True, bounds=(0, None), inclusive_bounds=(True, True), label='Height')

    The height of the component (in pixels).  This can be either
    fixed or preferred height, depending on height sizing policy.

width = Integer(allow_None=True, bounds=(0, None), inclusive_bounds=(True, True), label='Width')

    The width of the component (in pixels). This can be either
    fixed or preferred width, depending on width sizing policy.

allow_resize = Boolean(default=True, label='Allow resize')

    Allow resizing the grid cells.

allow_drag = Boolean(default=True, label='Allow drag')

    Allow dragging the grid cells.

state = List(bounds=(0, None), default=[], item_type=<class 'dict'>, label='State')

    Current state of the grid (updated as items are resized and
    dragged).