title: Can CSS Grid layout be used to implement resizing of editor panes (e.g. as in CodePen)
body: <p>I'd like to implement resizable panes without JS, only using <a href="https://css-tricks.com/snippets/css/complete-guide-grid" rel="nofollow noreferrer">CSS Grid layout</a>. Is this possible?</p>
  
  <p>For e.g. CodePen's editor has resizable panes for its HTML / CSS / JS editors. Also, see the example below which implements it in plain JS (I can't seem to add a URL to the CodePen  example in it, so it's a bit hard to add attribution. The code is by <a href="http://codepen.io/gsound/" rel="nofollow noreferrer">http://codepen.io/gsound/</a>).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let isResizing = false;
  
  let $handler = document.getElementById('handler');
  let $wrapper = document.getElementById('wrapper');
  let $left = document.getElementById('left');
  
  $handler.addEventListener('mousedown', function(e){
    isResizing = true;
  });
  
  document.addEventListener('mousemove', function(e){
    if( !isResizing ) return;
    let newWidth = e.clientX - $wrapper.offsetLeft;
    $left.style.width = newWidth + 'px';
  });
  
  document.addEventListener('mouseup', function(){
    isResizing = false;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,body{
    height: 100%;
    width: 100%;
    margin: 0;
  }
  
  #app{
    height: 100%;
  /*   max-width: 1400px; */
    margin: 0 auto;
  }
  
  header{
    background-color: #AAA;
    height: 50px;
  }
  
  #wrapper{
    margin: 0 auto;
    height: calc(100% - 50px);
    width: 100%;
    background-color: #EEE;
    display: flex;
  }
  
  #handler{
    background-color: red;
    width: 5px;
    cursor: col-resize;
  }
  
  #left{
    width: 200px;
  }
  
  #content{
    width: 100%;
    flex: 1;
  }
  
  
  /* ----------- */
  
  #left{
    background-color: yellow;
  }
  
  #content{
    background-color: #232378;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="app"&gt;
    &lt;header&gt;head&lt;/header&gt;
    &lt;div id="wrapper"&gt;
      &lt;aside id="left"&gt;&lt;/aside&gt;
      &lt;div id="handler"&gt;&lt;/div&gt;
      &lt;article id="content"&gt;&lt;/article&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>P.S as a side note, I have re-implemented the e.g. above by adding and removing <code>'mousemove'</code>, <code>'mouseup'</code> events and was wondering whether that's "better" (more performant) than using a boolean <code>isResizing</code> and keeping the event listeners always there...</p>