{"id":13732794,"url":"https://github.com/rstudio/gridlayout","last_synced_at":"2025-02-25T19:41:57.335Z","repository":{"id":50413802,"uuid":"339866363","full_name":"rstudio/gridlayout","owner":"rstudio","description":"Package for setting up CSS grid layouts in Shiny apps or RMarkdown documents","archived":false,"fork":false,"pushed_at":"2023-10-16T15:48:10.000Z","size":52534,"stargazers_count":44,"open_issues_count":2,"forks_count":3,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-01-08T08:45:16.450Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://rstudio.github.io/gridlayout","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rstudio.png","metadata":{"files":{"readme":"README.Rmd","changelog":"NEWS.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-17T21:57:27.000Z","updated_at":"2024-08-28T03:02:46.000Z","dependencies_parsed_at":"2024-11-10T21:12:19.548Z","dependency_job_id":null,"html_url":"https://github.com/rstudio/gridlayout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstudio%2Fgridlayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstudio%2Fgridlayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstudio%2Fgridlayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstudio%2Fgridlayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rstudio","download_url":"https://codeload.github.com/rstudio/gridlayout/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240738063,"owners_count":19849545,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T03:00:33.953Z","updated_at":"2025-02-25T19:41:57.297Z","avatar_url":"https://github.com/rstudio.png","language":"HTML","funding_links":[],"categories":["Theming"],"sub_categories":["Generic Theming"],"readme":"---\noutput: github_document\n---\n\n\u003c!-- README.md is generated from README.Rmd. Please edit that file --\u003e\n\n```{r, include = FALSE}\nknitr::opts_chunk$set(\n  collapse = TRUE,\n  comment = \"#\u003e\",\n  fig.path = \"man/figures/README-\",\n  out.width = \"100%\"\n)\n```\n\n# gridlayout\n\n\u003c!-- badges: start --\u003e\n[![R-CMD-check](https://github.com/rstudio/gridlayout/workflows/R-CMD-check/badge.svg)](https://github.com/rstudio/gridlayout/actions)\n\u003c!-- badges: end --\u003e\n\nBuild dashboard-style layouts for Shiny and RMarkdown easily using CSS-Grid.\n\n\n## Installation\n\nYou can install the development version from [GitHub](https://github.com/) with:\n\n``` r\n# install.packages(\"devtools\")\ndevtools::install_github(\"rstudio/gridlayout\")\n```\n\n## Setting up your `gridlayout`\n\nThe easiest and most common way to specify a grid layout is using an character vector syntax where the elements in your layout are visually lined up making the general gist of the layout clear at a glance. \n\n```{r md_to_gridlayout}\nlibrary(gridlayout)\n\nmy_layout \u003c- new_gridlayout(c(\n  \"      120px   1fr    1fr   \",\n  \"100px header  header header\",\n  \"1fr   sidebar plot_a plot_c\",\n  \"1fr   sidebar plot_b plot_b\"\n))\n\nmy_layout\n```\n\nFor more info and alternative ways of defining a layout see `vignette(\"defining-a-layout\", package = \"gridlayout\")`.\n\n## Using in a shiny app\n\nOnce you've setup your layout, the easiest way you can use it in your shiny apps is with the `grid_page()` ui function:\n\n```{r, eval = FALSE}\nlibrary(shiny)\nlibrary(bslib)\n\n# The classic Geyser app with grid layout\nshinyApp(\n  ui = grid_page(\n    layout = c(\n      \"     200px   1fr   \",\n      \"85px header  header\",\n      \"1fr  sidebar plot  \"\n    ),\n    grid_card_text(\"header\", \"Geysers!\", is_title = TRUE),\n    grid_card(\n      \"sidebar\",\n      card_header(\"Settings\"),\n      sliderInput(\"bins\",\"Number of bins:\", \n                  min = 1, max = 50, value = 30, width = \"100%\")\n    ),\n    grid_card(\n      \"plot\",\n      card_body(\n        plotOutput(\"distPlot\")\n      )\n    )\n  ),\n  server = function(input, output) {\n    output$distPlot \u003c- renderPlot({\n      x    \u003c- faithful[, 2]\n      bins \u003c- seq(min(x), max(x), length.out = input$bins + 1)\n      hist(x, breaks = bins, col = 'darkgray', border = 'white')\n    })\n  }\n)\n```\n\n```{r, echo = FALSE, message=FALSE}\nknitr::include_graphics(\"man/figures/geyser_demo.png\")\n```\n_Screenshot of grided geyser app running_\n\n## Other ways of using `gridlayout` in your app\n\n`grid_page()` will automatically make your gridlayout fill the entire page. If you are interested in having a finer-grain control over the size and position of your grid layout you can use the `grid_container()` function to place your grid layout wherever you want. The equivalent app to above can be created by replacing the UI definition with a `fluidPage` containing a `grid_container()`:\n\n```{r, eval = FALSE}\n...\nshinyApp(\n  ui = fluidPage(\n    grid_container(\n      layout = c(\n        \"     200px   1fr   \",\n        \"85px header  header\",\n        \"1fr  sidebar plot  \"\n      ),\n      grid_card_text(\"header\", \"Geysers!\"),\n      grid_card(\n        \"sidebar\",\n        card_header(\"Settings\"),\n        sliderInput(\"bins\", \"Number of bins:\", \n                    min = 1, max = 50, value = 30, width = \"100%\")\n      ),\n      grid_card(\n        \"plot\",\n        card_body(\n          plotOutput(\"distPlot\")\n        )\n      )\n    )\n  ),\n  server = ...\n)\n```\n\nThis time, however the grid is constrained to `800px` tall, no-matter how large or small the window viewing it is. \n\nAlternatively you can use `grid_nested()` to use a `gridlayout` layout within a panel another `gridlayout`. \n\n\n```{r, eval=FALSE}\n...\nshinyApp(\n  ui = grid_page(\n  layout = c(\n    \"     250px   1fr   \",\n    \"50px header  header\",\n    \"1fr  sidebar plots \"\n  ),\n  grid_card_text(\"header\", \"This is my header\"),\n  grid_card(\n    \"sidebar\",\n    card_header(\"Settings\"),\n    sliderInput(\"bins\", \"Number of bins:\", min = 1, max = 50, value = 30, width = \"100%\")\n  ),\n  grid_nested(\n    \"plots\",\n    title = \"Plots - in technicolor\",\n    layout = c(\n      \"distPlot distPlot distPlot\",\n      \"redPlot  bluePlot greenPlot\"\n    ),\n    grid_card_plot(\"distPlot\"),\n    grid_card_plot(\"redPlot\"),\n    grid_card_plot(\"bluePlot\"),\n    grid_card_plot(\"greenPlot\")\n  ),\n  server = ...\n)\n```\n\n\n## Using in RMarkdown\n\nThe function `use_gridlayout_rmd()` called in the `setup` chunk of an RMarkdown file will enable you to use gridlayout to layout your document. Just match the section headers to the layout element names and place layout md table in a `gridlayout` chunk... \n\n__`my_app.rmd`__\n````\n---\ntitle: \"`gridlayout` in Rmarkdown\"\nauthor: \"Nick Strayer\"\ndate: \"3/9/2021\"\noutput: html_document\n---\n\n```{r setup, eval = FALSE, include=FALSE}\nlibrary(gridlayout)\nuse_gridlayout_rmd()\n```\n\n## Main\n\n```{gridlayout}\n|      |        |         |\n|------|--------|---------|\n|2rem  |200px   |1fr      |\n|150px |header  |header   |\n|1fr   |sidebar |main     |\n|120px |footer  |footer   |\n```\n\n\n## Sidebar\n\nHere is some content for the sidebar\n\n## Footer\n\nAnything you want could go in the footer.\n\n````\n\n```{r, echo = FALSE, message=FALSE}\nknitr::include_graphics(\"man/figures/basic_markdown.png\")\n```\n\n_Output of `my_app.rmd`_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frstudio%2Fgridlayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frstudio%2Fgridlayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frstudio%2Fgridlayout/lists"}