gridPanel: Create a panel with a CSS grid layout

In pedrocoutinhosilva/shiny.grid: CSS grid implementation for shiny

Description

Create a panel with a CSS grid layout

Usage

gridPanel(
  ...,
  areas = NULL,
  rows = NULL,
  columns = NULL,
  id = paste0("grid-", stringi::stri_rand_strings(1, 12)),
  class = NULL,
  gap = NULL,
  style = NULL
)

Arguments

...	Elements to include within the panel
areas	A list of named areas. Each element should contain the names, per row, of each area of the grid. Expected values follow the convension for the grid-template-areas css attribute.
rows	A string of css valid sizes separated by a space. Follows the convension for the grid-template-rows css attribute. If not provided the existing space will be split equally acording to the areas defined in areas.
columns	A string of css valid sizes separated by a space. Follows the convension for the grid-template-columns css attribute. If not provided the existing space will be split equally acording to the areas defined in areas.
id	The html id of the panel container.
class	Custom classes to be added to the panel container.
style	Custom css style attributes to be added to the panel container.

Details

Behaves similar to normal HTML div tags, but simplifies the way css grid can be used via the arguments area, rows and columns. Only areas is required, when not used rows and columns will simply split the existing space equaly between each row / column. Internally the function creates the styles for the grid positions by generating the rules for positioning the children via their classes. To position a child element simply make sure that it includes a class with the same name as the named area.

Value

An HTML tagList.

Note

See https://css-tricks.com/snippets/css/complete-guide-grid/ for additional details on using css grids

See Also

[gridPage()]

Other grid functions: flexPanel(), gridPage()

Examples

gridPanel(
  areas = c("area-1 area-1", "area-2 area-3"),
  rows = c"1fr 2fr",
  columns = c"2fr 100px",
  div(class = "area-1"),
  div(class = "area-2"),
  div(class = "area-3")
)

pedrocoutinhosilva/shiny.grid documentation built on Nov. 18, 2021, 8:26 p.m.