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
, wherenum
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 thegrid-template-columns
CSS property manually, either via astyle
attribute or a CSS stylesheet.- If missing, a value of
200px
will be used.
- A (unit-less) number between 0 and 1, specified as
fixed_width: bool = False
-
When
width
is greater than 1 or is a CSS length unit, e.g.,"200px"
,fixed_width
indicates whether thatwidth
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 whenwidth
space is available and columns will never exceed the container or viewport size.When
fixed_width=TRUE
, all columns will be exactlywidth
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"
). Usemin_height
andmax_height
in a filling layout to ensure that the layout container does not shrink below amin_height
or grow beyond amax_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
Type | Description |
---|---|
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)