R Shiny bslib: Layout of 1 card in 1st column spanning 2 rows, and 2 cards in 2nd column on each row

Question

I am finding it difficult to achieve a bslib layout of 1 card in the 1st column taking 2 rows, and 2 cards in the second column in each row. How do I achieve a card layout in bslib like this:

bslib card layout

Here is a small app to try and achieve this goal.

library(shiny)
library(bslib)

x <- card("This is a card.")

ui <- page_navbar(
  nav_panel(
    "One",
    layout_columns(
      ### Column and row sizes
      col_widths = c(4, 4, 4),
      row_heights = c(2, 1, 1),
      x, x, x
    )
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui = ui, server = server)

Answer 1

You can try this configuration recommended by bslib

library(bslib)
library(shiny)

x <- card("This is a card.")

ui <- page_navbar(
  nav_panel(
    title = "{bslib} layout",
    layout_columns(
      col_widths = 6,
      x,
      layout_columns(
        col_widths = 12,
        x,
        x
      )
    )
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui = ui, server = server)