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. For more explanation and illustrative examples, see here
Usage
layout_column_wrap(
width,
...,
fixed_width = FALSE,
heights_equal = c("all", "row"),
fill = TRUE,
height = NULL,
height_mobile = NULL,
gap = NULL,
class = NULL
)
Arguments
- width
The desired width of each card, which can be any of the following:
A (unit-less) number between 0 and 1.
This should be specified as
1/num
, wherenum
represents the number of desired columns.
Either the minimum (when
fixed_width=FALSE
) or fixed width (fixed_width=TRUE
).
NULL
Allows power users to set the
grid-template-columns
CSS property manually, either via astyle
attribute or a CSS stylesheet.
- ...
Unnamed arguments should be UI elements (e.g.,
card()
) Named arguments become attributes on the containing htmltools::tag element.- fixed_width
Whether or not to interpret the
width
as a minimum (fixed_width=FALSE
) or fixed (fixed_width=TRUE
) width when it is a CSS length unit.- heights_equal
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
whether or not the grid items should grow to fill the row height.
- height
Any valid CSS unit (e.g.,
height="200px"
).- height_mobile
Any valid CSS unit to use for the height when on mobile devices (or narrow windows).
- gap
A CSS length unit defining the
gap
(i.e., spacing) between elements provided to...
.- class
Additional CSS classes for the returned UI element.
Examples
x <- card("A simple card")
# Always has 2 columns (on non-mobile)
layout_column_wrap(1/2, x, x, x)
#> <div class="container-fluid">
#> <div class="bslib-column-wrap html-fill-item" data-require-bs-caller="layout_column_wrap()" data-require-bs-version="5" style="grid-template-columns:1fr 1fr;grid-auto-rows:1fr;--bslib-column-wrap-height:auto;--bslib-column-wrap-height-mobile:auto;">
#> <div class="html-fill-container">
#> <div class="html-fill-item html-fill-container">
#> <div class="card bslib-card html-fill-item html-fill-container" data-require-bs-caller="card()" data-require-bs-version="5">
#> <div class="card-body" style="flex:0 0 auto;">A simple card</div>
#> </div>
#> </div>
#> </div>
#> <div class="html-fill-container">
#> <div class="html-fill-item html-fill-container">
#> <div class="card bslib-card html-fill-item html-fill-container" data-require-bs-caller="card()" data-require-bs-version="5">
#> <div class="card-body" style="flex:0 0 auto;">A simple card</div>
#> </div>
#> </div>
#> </div>
#> <div class="html-fill-container">
#> <div class="html-fill-item html-fill-container">
#> <div class="card bslib-card html-fill-item html-fill-container" data-require-bs-caller="card()" data-require-bs-version="5">
#> <div class="card-body" style="flex:0 0 auto;">A simple card</div>
#> </div>
#> </div>
#> </div>
#> </div>
#> </div>
# Has three columns when viewport is wider than 750px
layout_column_wrap("250px", x, x, x)
#> <div class="container-fluid">
#> <div class="bslib-column-wrap html-fill-item" data-require-bs-caller="layout_column_wrap()" data-require-bs-version="5" style="grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));grid-auto-rows:1fr;--bslib-column-wrap-height:auto;--bslib-column-wrap-height-mobile:auto;">
#> <div class="html-fill-container">
#> <div class="html-fill-item html-fill-container">
#> <div class="card bslib-card html-fill-item html-fill-container" data-require-bs-caller="card()" data-require-bs-version="5">
#> <div class="card-body" style="flex:0 0 auto;">A simple card</div>
#> </div>
#> </div>
#> </div>
#> <div class="html-fill-container">
#> <div class="html-fill-item html-fill-container">
#> <div class="card bslib-card html-fill-item html-fill-container" data-require-bs-caller="card()" data-require-bs-version="5">
#> <div class="card-body" style="flex:0 0 auto;">A simple card</div>
#> </div>
#> </div>
#> </div>
#> <div class="html-fill-container">
#> <div class="html-fill-item html-fill-container">
#> <div class="card bslib-card html-fill-item html-fill-container" data-require-bs-caller="card()" data-require-bs-version="5">
#> <div class="card-body" style="flex:0 0 auto;">A simple card</div>
#> </div>
#> </div>
#> </div>
#> </div>
#> </div>