<html>
  <head>
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
  </head>
  <body>
    <div id='grid'>
      <div class="toolbar header start">cool editor</div>
      <div class="panel middle start scroll">
        This left side panel hasreallywidetextthattakesupalotofspace
        and a min width of 150px. 
        Closing this panel will set display to <i>none</i>;
      </div>
      <div class="toolbar footer start">
        <button class="fa fa-plus-circle"></button>
        <button class="fa fa-minus-circle"></button>
      </div>

      <div class="toolbar header center">
        <button class="fa fa-save"></button>
        <span class='spacer'></span>
        <label>current file</label>
        <span class='spacer'></span>
        <button class="fa fa-file"></button>
      </div>
      
      <div class="content middle center">
        this is the content that we are editing       
      </div>
      
      <div class="toolbar footer center">
        <button id="toggle-left"> &lt;</button>
        <span class='spacer'></span>
        <button id="toggle-right"> &gt;</button>
      </div>

      
      <div class="toolbar header end">selected item</div>

      <div class="panel middle end scroll">
        the right side panel
      </div>
      
      <div class="toolbar footer end">more actions</div>
    </div>
  </body>
</html>
/* the grid */


#grid {
    display: grid;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    grid-template-columns: 
        [start] minmax(auto, min-content) 
        [center] auto 
        [end] minmax(auto, min-content);
    grid-template-rows: 
        [header] 2em 
        [middle] auto 
        [footer] 2em;
    padding: 0;
    grid-column-gap: 1px;
    grid-row-gap: 1px;
    background-color: #333;
}

.start { grid-column-start: start; }
.center { grid-column-start: center; }
.end { grid-column-start: end; }
.header { grid-row-start: header; }
.middle { grid-row-start: middle; }
.footer { grid-row-start: footer; }



/* extra styles */
.scroll { overflow: auto;  }
.spacer { flex: 1; }

.panel, .toolbar { background-color: #ccc; }

.toolbar {
  display:flex;
  flex-direction: row;
  align-items: stretch;
}
.toolbar button {
  background-color: #ccc;
  border: 0px solid black;
}
.toolbar button:hover {
  background-color: #888;
}
.content { background-color: white; }


html, body {
  font-family: sans-serif;
  padding:0;
  margin:0;
}

.start, .end { min-width: 150px; }
.closed { display: none; }

   const $ = (selector) => document.querySelector(selector)
   const $$ = (selector) => document.querySelectorAll(selector)
   const on = (elem, type, listener) => elem.addEventListener(type,listener)

   on($('#toggle-left'),'click',()=>{
       $$(".start").forEach((elem) => elem.classList.toggle('closed'))
   })
   on($('#toggle-right'),'click',()=>{
       $$(".end").forEach((elem) => elem.classList.toggle('closed'))
   })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.