CSS 网格布局是否可用于实现编辑器窗格的大小调整（例如在 CodePen 中）

Question

我想在没有 JS 的情况下实现可调整大小的窗格，只使用 CSS Grid layout。这可能吗？

例如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>

P.S 作为旁注，我重新实现了例如通过添加和删除 'mousemove'、'mouseup' 事件，我想知道这是否 "better"（性能更高）而不是使用布尔值 isResizing 并始终保持事件侦听器...

Answer 1

网格布局模块是纯粹的CSS。

可调整大小的窗格通常需要 JavaScript 才能运行。

知道 CSS 主要是为样式和演示而设计的，Grid Layout spec 中很可能没有内置属性或方法来提供可手动调整大小的窗格。

CSS 网格布局是否可用于实现编辑器窗格的大小调整（例如在 CodePen 中）

Can CSS Grid layout be used to implement resizing of editor panes (e.g. as in CodePen)

css

css-grid