connectwidget grid layout

[ryangarnett]

I am using the connectwidgets R package within a Quatro document to build a catalog page. I plan is to use the grid layout, however it results in a "grid list" rather than a 4x4 grid layout. I am hoping there is a small syntax issue that can be done to resolve my problem.

Here is a reproducable example:

---
title: "Home"
output: html_document
---

```{r message = FALSE, warning = FALSE, echo = FALSE}
library(connectwidgets)
library(dplyr, warn.conflicts = FALSE)

knitr::opts_chunk$set(echo = FALSE, message = FALSE, warning = FALSE)

df <- data.frame(
  guid = c("abc100", "abc101", "abc102", "abc103"),
  url = c("http://google.com", "http://nfl.com", "http://cbc.com", "http://linkedin.com"),
  title = c("Dataset 1", "Dataset 2", "Dataset 3", "Dataset 4"),
  app_mode = c("static", "static", "static", "static"),
  owner_username = c("owner1", "owner1", "owner2", "owner3"),
  updated_time = c("2022-12-26 12:00:00", "2022-12-26 15:15:00", "2022-12-27 09:45:00", "2028-12-28 16:20:00")
)

df %>%
  connectwidgets::rsc_grid()

The above code produces the following:

[scottyd22]

One way to handle this is to specify a smaller width (25%) for the grid items via CSS. See the addition of <style> tags below. This was done in rmarkdown, but I believe it would be the same in Quarto. Please note, I only included two of three ticks in the code below to get the sections to show (be sure to add the third tick mark back). For illustration purposes, the data frame was duplicated to create more items in the grid.

---
title: "Home"
output: html_document
---

`` {r message = FALSE, warning = FALSE, echo = FALSE}
library(connectwidgets)
library(dplyr, warn.conflicts = FALSE)
knitr::opts_chunk$set(echo = FALSE, message = FALSE, warning = FALSE)
`` 

\<style>
.rscgrid-item { width: 25%; }
\</style>

``{r}
df <- data.frame(
  guid = c("abc100", "abc101", "abc102", "abc103"),
  url = c("http://google.com", "http://nfl.com", "http://cbc.com", "http://linkedin.com"),
  title = c("Dataset 1", "Dataset 2", "Dataset 3", "Dataset 4"),
  app_mode = c("static", "static", "static", "static"),
  owner_username = c("owner1", "owner1", "owner2", "owner3"),
  updated_time = c("2022-12-26 12:00:00", "2022-12-26 15:15:00", "2022-12-27 09:45:00", "2028-12-28 16:20:00")
)

df = bind_rows(df, df, df, df)

df %>%
  connectwidgets::rsc_grid()
``

[ryangarnett]

@scottyd22

.rscgrid-item { width: 25%; }

Scott that is perfect, thanks! So simple and very effective. Much appreciated!