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 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, where num represents the number of desired columns.

• A CSS length unit

  • 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 a style 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>