In atusy/cssgrid: Easy CSS Grid Layout For R Markdown And Shiny

```{css css, echo = FALSE} body {box-sizing: border-box;} .cssgrid p {margin: 0;}

```r
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>",
  eval = TRUE
)

library(cssgrid)
knitr::opts_chunk$set(echo = TRUE)

i <- function(x, ...) grid_item(x, ..., style = "border: solid black; text-align: center;")
txt <- function(x) div(x, style = "margin: 0;", class="foo")
grid_layout(
  i(txt("C"), area = "a"), i(txt("S"), area = "b"), i(txt("S"), area = "c"), 
  i(txt("grid"), area = "d"),
  cols = "1.5rem 1.5rem 1.5rem", rows = "1lh 1lh",
  areas = c("a b c", "d d d"),
  gap = ".5rem", class = "cssgrid"
)

library(cssgrid)

Simple examples

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
)

Tidyverse style coding

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
  )

Shiny UI

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.

```{css, echo = FALSE} .form-group .form-control {width: 100%;}

## Read button has auto width, and the rest of area is dominated by text input

```r
grid_layout(
  shiny::textInput("url", "URL", "https://example.com", width = "100%"),
  shiny::actionButton("read", "Read"),
  rows = "auto", cols = "1fr auto", column_gap = "10px"
)

Send button has auto width, and the rest of area is divided into 1:2 ratios

grid_rowwise is an alternative to grid_layout when layouting in 1 row.

grid_rowwise will add column size "auto" in case additional grids are required.

items <- tagList(
  shiny::textInput("to", "To", width = "100%"),
  shiny::textInput("message", "Message", width = "100%"),
  shiny::actionButton("read", "Send")
)
grid_rowwise(items, cols = "1fr 2fr auto", column_gap = "10px")
# This one misses cols for 3rd item, which will be treated as "auto".
# Thus the result becomes identical to the above.
grid_rowwise(items, cols = "1fr 2fr", column_gap = "10px")