style <- "border: solid black;"
grid_layout(
grid_item("A", area = "a", style = style),
grid_item("B", area = "b", style = style),
grid_item("C", area = "c", style = style),
cols = c("1fr 2fr"), rows = c("1fr 1fr"), areas = c("a b", "a c"),
style = style
)
grid_layout(
grid_item("A", row = "1 / 3", col = "1 / 2", style = style),
grid_item("B", row = "1 / 2", col = "2 / 3", style = style),
grid_item("C", row = "2 / 3", col = "2 / 3", style = style),
cols = c("1fr 2fr"), rows = c("1fr 1fr"), style = style
)
library(magrittr)
tibble::tibble(
content = list(
tags$h1("Title"), tags$h2("Sidebar"), tags$h2("Article A"), tags$h2("Article B")
),
area = c("title", "side", "A", "B"),
style = style
) %>%
purrr::pmap(function(content, ...) grid_item(content, ...)) %>%
# tagList %>%
grid_layout(
cols = c("1fr 2fr"), rows = c("auto, 1fr 1fr"),
areas = c(
"title title",
"side A",
"side B"
),
style = style
)
Valid units for sizing elements in shiny
package are limited to px
, %
, em
, pt
, in
, cm
, mm
, ex
, or pc
.
Thus, there is a difficulty when layouting one element with certain size and the other fitting to the rest of area, or split the rest of the area for more elements with variety of ratios.
This is what CSS Grid Layout supports by the fr
unit.