gridlayout container for use within other elements

Builds a gridlayout within a div of specified id. Not typically called directly but can be used to create nested grids

grid_container(
  layout,
  ...,
  id = NULL,
  flag_mismatches = TRUE,
  row_sizes = NULL,
  col_sizes = NULL,
  gap_size = NULL,
  container_height = NULL
)

Arguments

layout

Either a markdown table representation (see md_to_gridlayout) or a gridlayout object defining the desired layout for your Shiny app.

...

grid_card() (or similar) arguments that will fill the grid layout. Note the areas should match the those provided in layout.

id

ID unique to this container (note that the HTML will be prefixed with grid- to avoid namespace clashes)

flag_mismatches

Should a mismatch between supplied elements ui definitions and layout trigger a warning? In advanced cases you may want to dynamically set your layout and sometimes omit panels.

row_sizes

A character vector of valid css sizes for the height of each row in your grid as given by the main layout definition. If a single value is passed, it will be repeated for all columns. If sizes are provided both here and in the main layout then these sizes will be the ones used.

col_sizes

Same as row_sizes, but for column widths

gap_size

Valid css sizing for gap to be left between each element in your grid. Like row_sizes and col_sizes, this will win-out over a gap size provided in the main layout table.

container_height

Valid css unit determining how tall the containing element should be for this layout. Defaults to 100%. Special value of "viewport" for full-page height maps to the CSS value of 100vh if any relative units (e.g. fr or auto) are included in row sizes and auto otherwise. Values such as "auto" will let the page grow to as large as it needs to be to fit all content. This should most likely be avoided when using row heights in relative units.

Value

A taglist with grid elements wrapped inside a container div of class id.

See also

grid_page() for using a gridlayout to entirely define the page. grid_nested() for placing a grid container within another gridlayout. grid_card() for placing content inside your layout. See vignette("defining-a-layout", package = "gridlayout") for more info on defining your layout.

Examples

if (FALSE) {
library(gridlayout)
library(shiny)

# The classic Geyser app with grid layout
shinyApp(
  ui = fluidPage(
    grid_container(
      layout = "
        |2rem  |200px   |1fr    |
        |85px  |header  |header |
        |1fr   |sidebar |plot   |",
      grid_card_text("header", "Geysers!"),
      grid_card(
        "sidebar",
         card_header("Settings"),
        sliderInput("bins", "Number of bins:",
           min = 1,
           max = 50,
           value = 30,
           width = "100%")
      ),
      grid_card_plot("plot")
    )
  ),
  server = function(input, output) {
    output$plot <- renderPlot({
      x    <- faithful[, 2]
      bins <- seq(min(x), max(x), length.out = input$bins + 1)
      hist(x, breaks = bins, col = 'darkgray', border = 'white')
    })
  }
)
}