Creating asymmetric layouts involving rows and column in Shiny

Question

I have created multiple rows in a shiny ui as such:

shinyUI(fluidPage(

fluidRow(    
  column(6,
        textOutput("text_col1_row_1")),
  column(6
        textOutput("text_col2_row_1"))),

fluidRow( 
  column(6,
       textOutput("text_col1_row_2")),
  column(6,
       textOutput("text_col2_row_2"))),
   ))

which creates a nice 4 X 4 grid.

It seems Shiny is geared towards allowing users to organize objects into columns.

I would like to see if I can organize my display into something that has two columns, yet within a column, it has two rows -- it's probably clearer if I whip up a simple illustration:

(This is just a general idea and there is nothing set in stone regarding column / row sizes at the moment -- just looking for the bare-bones template for this structure, so to speak.)

I have searched around the documentation and can't seem to find a reasonable solution. If anyone has thought about and solved this or has any ideas, I'd love to hear them. Thanks.

Answer 1

Have a look at http://getbootstrap.com/2.3.2/scaffolding.html . The shiny functions fluidRow and column are convenience function to create div(class = "row-fluid, ...) and div(class = "spanx", ...) respectively:

library(shiny)
runApp(list(
  ui = fluidPage(
    fluidRow(
      column(6
             , fluidRow(
               column(6, style = "background-color:yellow;", div(style = "height:300px;"))
               , column(6, style = "background-color:green", div(style = "height:300px;"))
             )
             , fluidRow(
               column(12, style = "background-color:red;", div(style = "height:300px;"))
               )
      )
      , column(6, style = "background-color:blue;", div(style = "height:600px;"))
    )
  ),
  server = function(input, output) {
  }
))