如何在 Shiny 中使用 HTML/CSS 创建一个简单的网格面板布局？

Question

我正在尝试使用 HTML 在 Shiny 中创建一个简单的 4 面板网格，但无法让它工作。虽然有一些相关的帖子，例如 Difficulty creating a content grid layout using css and html referencing a solution at http://jsfiddle.net/ZNSAX/2/，但这些都是 HTML 在 Shiny 之外完成的。

下面的第一张图片显示了在 R Studio 浏览器和 Edge 浏览器上的输出结果，而第二张图片是我试图获得的 4 面板网格的粗略渲染。

fluidRow(...)、column(x,...)、class = "panel panel-default",style="width: 60px"、tags$div(class = ...)这么多形式我瞎折腾了，不知我是不是已经穷尽所有可能了！

下面是简单的可重现代码：

library(shiny)
library(htmltools)
library(htmlwidgets)

ui <- fluidPage(
  fluidRow(
    column(6,
           div(class = "panel panel-default",
               div(class = "panel-heading", "Panel 1"),
               div(class = "panel-body", "panel 1 id")
           ),
           div(class = "panel panel-default",
               div(class = "panel-heading", "Panel 2"),
               div(class = "panel-body", "panel 2 id")
           )
           
    ),
    column(6,
           div(class = "panel panel-default",
               div(class = "panel-heading", "Panel 3"),
               div(class = "panel-body", "panel 3 id")
           ),
           div(class = "panel panel-default",
               div(class = "panel-heading", "Panel 4"),
               div(class = "panel-body", "panel 4 id")
           )
    )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

Answer 1

也许是这个？你可以简单地调整[=17=中的宽度（我设置为60%）和child div之间的间距（我设置为2rem） ] div.


library(shiny)
library(htmltools)
library(htmlwidgets)

ui <- fluidPage(
  div(style = "margin-top: 2rem; width: 60%; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;",
      
      
      div(class = "panel panel-default",
          div(class = "panel-heading", "Panel 1"),
          div(class = "panel-body", "panel 1 id")
      ),
      div(class = "panel panel-default",
          div(class = "panel-heading", "Panel 2"),
          div(class = "panel-body", "panel 2 id")
      ),
      
      div(class = "panel panel-default",
             div(class = "panel-heading", "Panel 3"),
             div(class = "panel-body", "panel 3 id")
         ),
      
      div(class = "panel panel-default",
             div(class = "panel-heading", "Panel 4"),
             div(class = "panel-body", "panel 4 id")
         )
  )
)
)

server <- function(input, output) {}

shinyApp(ui, server)

如何在 Shiny 中使用 HTML/CSS 创建一个简单的网格面板布局？

How to create a simple grid panel layout using HTML/CSS within Shiny?

html

css

r

shiny