ui.layout_column_wrap

ui.layout_column_wrap(
    *args,
    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,
)

A grid-like, column-first layout

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

Parameters

*args : TagChild | TagAttrs = ()

Unnamed arguments should be UI elements (e.g., card). Named arguments become attributes on the containing Tag element.

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.

Returns

: Tag

A Tag element.

See Also

• layout_columns for laying out elements into a responsive 12-column grid.

Examples

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

## file: app.py
from shiny import App, ui

y = ui.card("A simple card")

app_ui = ui.page_fluid(
    # Always has 2 columns (on non-mobile)
    ui.layout_column_wrap(y, y, y, width=1 / 2),
    ui.hr(),
    # Has three columns when viewport is wider than 750px
    ui.layout_column_wrap(y, y, y, width="250px"),
)


app = App(app_ui, server=None)