Two sidebars in flexdashboard layout
I think the grid layout will be good for your situation.
/* container */.container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr);}/* sidebar */.sidebar { background-color: #729fcf; grid-row-start: 1; grid-row-end: 4; display: flex; align-items: center; justify-content: center;}.sidebar:first-of-type { grid-column-start: 1;}.sidebar:last-of-type { grid-column-start: 4;}.sidebar:first-of-type > span { transform: rotate(-90deg);}.sidebar:last-of-type > span { transform: rotate(90deg);}/* charts */[class^="chart"] { text-align: center; display: flex; align-items: center; justify-content: center; height: 5rem; border: 1px solid lightgrey;}[class^="chart"]:not(.chart-3) { background-color: #76ec9b;}.chart-3 { background-color: #ee6264; grid-column-start: 2; grid-column-end: 4;}.chart-1,.chart-4 { margin-right: 0.1rem;}.chart-2,.chart-5 { margin-left: 0.1rem;}<section class="container"> <aside class="sidebar"><span>Inputs for charts 1 and 4</span></aside> <div class="chart-1">Chart 1</div> <div class="chart-2">Chart 2</div> <div class="chart-3">Chart 3</div> <div class="chart-4">Chart 4</div> <div class="chart-5">Chart 5</div> <aside class="sidebar"><span>Inputs for charts 2 and 5</span></aside></section>
I can offer a general solution. I recommend altering an existing theme, such as 'lumen' so that it results in the layout you wish to have. You could use Griffon or similar HTML editor to accomplish this. Then, refer to the lumen theme when rendering in Rmarkdown. See my related answer here.
This is it :
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> <link rel="stylesheet" href="style.css"> <title>Title</title></head><body> <div class="container"> <div class="row" style="background-color: rgb(115, 115, 223); height: 300px; width: 600px; "> <div class="col-2 "> One of three columns </div> <div class="col-8"> <div class="container"> <div class="row" style="background-color: lightgreen; height: 100px;"> <div class="col" style="border: 5px solid white;"> chart1 </div> <div class="col" style="border: 5px solid white;"> chart2 </div> </div> <div class="row" style="background-color:rgb(221, 96, 96); height: 100px;"> <div class="col" style="border: 5px solid white;"> chart3 </div> </div> <div class="row" style="background-color: lightgreen; height: 100px;"> <div class="col" style="border: 5px solid white;"> chart4 </div> <div class="col" style="border: 5px solid white;"> chart5 </div> </div> </div> </div> <div class="col-2" style="rgb(115, 115, 223);; height: 300px; "> One of three columns </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script></body></html>see :https://jsfiddle.net/sugandhnikhil/86fojbdz/
CSS would be much longer to write ,use Bootstrap Instead!!!!!!
Thanks!!!!
:-)