css - CSS グリッド レイアウトを使用してエディター ペインのサイズ変更を実装できますか (CodePen など)

Question

CSS Grid layoutのみを使用して、JS を使用せずにサイズ変更可能なペインを実装したいと思います。これは可能ですか？

たとえば、CodePen のエディターには、HTML / CSS / JS エディター用のサイズ変更可能なペインがあります。また、プレーンな JS で実装する以下の例を参照してください (CodePen の例に URL を追加できないようです。そのため、帰属を追加するのは少し難しいです。コードはhttp://codepen.io/によるものです)。 gsound/ )。

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;
});

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;
}

<div id="app">
  <header>head</header>
  <div id="wrapper">
    <aside id="left"></aside>
    <div id="handler"></div>
    <article id="content"></article>
  </div>
</div>

'mousemove'PS、補足として、イベントを追加および削除して上記の例を再実装しましたが、ブール値を使用してイベントリスナーを常に保持する'mouseup'よりも「優れている」(よりパフォーマンスが高い)かどうか疑問に思っていました...isResizing