r - How to combine row and column layout in flexdashboard? -

for new project want try new flexdasboard package. thinking of lay out in column , row orientation somehow combined.

the layout thinking of this:

if change code:

--- title: "focal chart (left)" output: flexdashboard::flex_dashboard ---  column {data-width=600} -------------------------------------  ### chart 1  ```{r} ```  column {data-width=400} -------------------------------------  ### chart 2  ```{r} ```     ### chart 3  ```{r} ``` 

into this:

--- title: "focal chart (left)" output: flexdashboard::flex_dashboard ---  column {data-width=600} -------------------------------------  ### chart 1  ```{r} ```  column {data-width=400} -------------------------------------  row {data-width=400} -------------------------------------  ### chart 2  ```{r} ```     ### chart 3  ```{r} ```     row {data-width=400} -------------------------------------  ### chart 4  ```{r} ``` 

(ofcourse) doesn't work, haven't figured out right way. have idea?

this not seem possible using basic rows , columns, can achieved using sidebar hold content of left hand panel. change formatting of left panel compared others, appearance can adusted liking editing css. note can alter width of side bar using data-width option e.g. {.sidebar data-width=300}

--- title: "focal chart" output:    flexdashboard::flex_dashboard:     orientation: rows ---  column {.sidebar data-width=500} ------------------------------------- ### chart 1 ```{r} ```  row {data-height=350} ------------------------------------- ### chart 2 ```{r} ```  ### chart 3 ```{r} ```     row {data-height=650} ------------------------------------- ### chart 4 ```{r} ``` 

which gives...

the appearance of side bar can edited liking. example:

to

1. change background color of side panel white (if want match other panels),
2. align top edge other panels, and
3. add borders left , bottom match other panels:

edit css style sheet .section.sidebar

.section.sidebar {   top: 61px;   border-bottom: 10px solid #ececec;   border-left: 10px solid #ececec;   background-color: rgba(255, 255, 255, 1); } 

to change padding, use data-padding option in flexdashboard markdown:

column {.sidebar data-width=500 data-padding=10} 

now, looks this: