title: Dynamically resize columns in css grid layout with mouse
body: <p>I am trying to dynamically resize css grid layout boxes by dragging the column dividers (or resize placeholders) with the mouse.</p>
  
  <p>I set <code>resize: horizontal;</code> on the <code>nav</code> element to resize, and it gets resized when I drag the small resize handle in the lower right corner of the element, but the width of the neighbouring column is not automatically adjusted which leads to overlap. Here is a broken <a href="https://codepen.io/ccpizz/pen/qXveZW" rel="noreferrer">codepen</a>.</p>
  
  <p><em>HTML</em>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;main&gt;
   &lt;nav&gt;#1&lt;/nav&gt;
   &lt;header&gt;#2&lt;/header&gt;
   &lt;section&gt;#3&lt;/section&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p><em>CSS</em>:</p>
  
  <pre class="lang-css prettyprint-override"><code>main {
      display: grid;
      border: 3px dotted red;
      grid-gap: 3px;
      grid-template-columns: 200px 1fr;
      grid-template-rows: 100px 1fr;
      height: 100%;
  }
  
  nav {
      grid-column: 1;
      grid-row: 1;
      grid-row: 1 / span 2;
      resize: horizontal;
      overflow: scroll;
      border: 3px dotted blue;
  }
  </code></pre>
  
  <p>I expected the css grid engine to automatically handle this case but apparently it does not.</p>
  
  <p>I experimented with <a href="https://jqueryui.com/resizable/" rel="noreferrer">jquery-ui resizable</a> but it does not seem to work well with css grids.</p>
  
  <p>I am looking into how to do it with jquery by setting the grid attribute <code>grid-template-columns/rows:</code> to a dynamic value but it is not clear how to catch the events thrown by resizing the element via the resize handle. The jquery <a href="https://api.jquery.com/resize/" rel="noreferrer">resize</a> event is only triggered on the <code>window</code> object, and not on dom elements.</p>
  
  <p>What might be a way to do it without having to handle low-level mouse events like dragstart/dragend?</p>