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,
fillable = 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 to allow the layout to grow/shrink to fit a fillable container with an opinionated height (e.g.,
page_fillable()
).- fillable
Whether or not each element is wrapped in a fillable container.
- height
Any valid CSS unit (e.g.,
height="200px"
). Doesn't apply when a card is madefull_screen
(in this case, consider setting aheight
incard_body()
).- 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...
. This argument is only applicable whenfillable = TRUE
- 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-grid bslib-mb-spacing html-fill-item" data-require-bs-caller="layout_column_wrap()" data-require-bs-version="5" style="grid-template-columns:repeat(2, minmax(0, 1fr));grid-auto-rows:1fr;--bslib-grid-height:auto;--bslib-grid-height-mobile:auto;">
#> <div class="bslib-gap-spacing html-fill-container">
#> <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-require-bs-caller="card()" data-require-bs-version="5">
#> <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">A simple card</div>
#> <script data-bslib-card-init>bslib.Card.initializeAllCards();</script>
#> </div>
#> </div>
#> <div class="bslib-gap-spacing html-fill-container">
#> <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-require-bs-caller="card()" data-require-bs-version="5">
#> <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">A simple card</div>
#> <script data-bslib-card-init>bslib.Card.initializeAllCards();</script>
#> </div>
#> </div>
#> <div class="bslib-gap-spacing html-fill-container">
#> <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-require-bs-caller="card()" data-require-bs-version="5">
#> <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">A simple card</div>
#> <script data-bslib-card-init>bslib.Card.initializeAllCards();</script>
#> </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-grid bslib-mb-spacing 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-grid-height:auto;--bslib-grid-height-mobile:auto;">
#> <div class="bslib-gap-spacing html-fill-container">
#> <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-require-bs-caller="card()" data-require-bs-version="5">
#> <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">A simple card</div>
#> <script data-bslib-card-init>bslib.Card.initializeAllCards();</script>
#> </div>
#> </div>
#> <div class="bslib-gap-spacing html-fill-container">
#> <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-require-bs-caller="card()" data-require-bs-version="5">
#> <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">A simple card</div>
#> <script data-bslib-card-init>bslib.Card.initializeAllCards();</script>
#> </div>
#> </div>
#> <div class="bslib-gap-spacing html-fill-container">
#> <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-require-bs-caller="card()" data-require-bs-version="5">
#> <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">A simple card</div>
#> <script data-bslib-card-init>bslib.Card.initializeAllCards();</script>
#> </div>
#> </div>
#> </div>
#> </div>