express.ui.layout_column_wrap

express.ui.layout_column_wrap(
    width=MISSING,
    fixed_width=False,
    heights_equal='all',
    fill=True,
    fillable=True,
    height=None,
    min_height=None,
    max_height=None,
    height_mobile=None,
    gap=None,
    class_=None,
    **kwargs,
)

Context manager for a grid-like, column-first layout

This function wraps layout_column_wrap.

Wraps a 1d sequence of UI elements into a 2d grid. The number of columns (and rows) in the grid dependent on the column width as well as the size of the display.

Parameters

width : CssUnit | None | MISSING_TYPE = MISSING

The desired width of each card. It can be one of the following: * A (unit-less) number between 0 and 1, specified as 1/num, where num represents the number of desired columns. * A CSS length unit representing either the minimum (when fixed_width=False) or fixed width (fixed_width=True). * None, which allows power users to set the grid-template-columns CSS property manually, either via a style attribute or a CSS stylesheet. * If missing, a value of 200px will be used.

fixed_width : bool = False

When width is greater than 1 or is a CSS length unit, e.g. "200px", fixed_width indicates whether that width value represents the absolute size of each column (fixed_width=TRUE) or the minimum size of a column (fixed_width=FALSE). When fixed_width=FALSE, new columns are added to a row when width space is available and columns will never exceed the container or viewport size. When fixed_width=TRUE, all columns will be exactly width wide, which may result in columns overflowing the parent container.

heights_equal : Literal[‘all’, ‘row’] = 'all'

If "all" (the default), every card in every row of the grid will have the same height. If "row", then every card in each row of the grid will have the same height, but heights may vary between rows.

fill : bool = True

Whether or not to allow the layout to grow/shrink to fit a fillable container with an opinionated height (e.g., page_fillable).

fillable : bool = True

Whether or not each element is wrapped in a fillable container.

height : Optional[CssUnit] = None

A valid CSS unit (e.g., height="200px"). Use min_height and max_height in a filling layout to ensure that the layout container does not shrink below a min_height or grow beyond a max_height.

height_mobile : Optional[CssUnit] = None

Any valid CSS unit to use for the height when on mobile devices (or narrow windows).

gap : Optional[CssUnit] = None

Any valid CSS unit to use for the gap between columns.

class_ : Optional[str] = None

A CSS class to apply to the containing element.

****kwargs** : TagAttrValue = {}

Additional attributes to apply to the containing element.

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
from shiny.express import ui

with ui.hold() as a_card:
    with ui.card():
        "A simple card"

# Always has 2 columns (on non-mobile)
with ui.layout_column_wrap(width=1 / 2):
    a_card
    a_card
    a_card

ui.hr()

# Has three columns when viewport is wider than 750px
with ui.layout_column_wrap(width="250px"):
    a_card
    a_card
    a_card