title: CSS Grid / Flex Resize Magic
body: <p>I've been spending the last few days trying to understand how CSS flexbox and grid works, and trying to use that knowledge in creating a particular UI, with no luck so far. I'm almost at the point of giving up on it.</p>
  <p>The UI looks something like this:</p>
  <pre><code>+----------+-----------------------+---------------------+-----------------+
  | CANVAS-1 | DIV-3                 | DIV-5               | DIV-7           |
  |          |                       |                     |                 |
  |          |                       |                     |                 |
  |          |                       |                     +-----------------+
  |          |                       |                     | DIV-8           |
  +----------+-----------------------+---------------------+                 |
  | CANVAS-2 | DIV-4                 | DIV-6               |                 |
  |          |                       |                     +----------------[4]
  |          |                       |                     | DIV-9           |
  |          |                       |                     |                 |
  |          |                       |                     |                 |
  +---------[1]---------------------[2]-------------------[3]----------------+
  
  </code></pre>
  <p>Ignoring resize capability, I can design this layout without many problems. However, I have to allow resizing as well, and this is where I have failed miserably over the past two weeks now. My constraints are as follows:</p>
  <ol>
  <li>The layout should fill the browser window (<code>width: 100vw, height: 100vh</code>).</li>
  <li>The two rows in the first three columns should have equal heights.</li>
  <li><code>DIV-8</code> should have height equal to its content and <code>DIV-7/9</code> should take up the remaining space equally.</li>
  <li><code>CANVAS-1</code> and <code>CANVAS-2</code> should have a width such that aspect ratio of the canvas is maintained (both canvas elements have <code>width=&quot;1242&quot; height=&quot;2208&quot;</code> attributes defined.</li>
  <li>Column #3 and #4 should have an initial width of <code>300px</code>.</li>
  </ol>
  <p>Using a nested grid, I can implement this layout just fine. However, I am also supposed to allow the layout to be resized according to the following rules:</p>
  <ol start="6">
  <li>Dragging <code>[1]</code> to the left should shrink both canvases while keeping their aspect ratios unchanged. Dragging right beyond its initial position should not be allowed. Dragging this line should not affect any other grid lines.</li>
  <li>Dragging <code>[2]</code> should move the grid line to the left or right, such that minimum width of <code>DIV-3/4</code> is no less than 400px and that of <code>DIV-5/6</code> is no less than 200px. Dragging this line should not affect any other grid lines.</li>
  <li>Dragging <code>[3]</code> should move the grid line to the left or right, such that minimum width of <code>DIV-5/6</code> is no less than 200px, and that of <code>DIV-7/8/9</code> is no less than 400px. Dragging this line should not affect any other grid lines.</li>
  <li>Dragging <code>[4]</code> should move the grid lines between <code>DIV-7/8</code> and <code>DIV-8/9</code> up or down, such that height of <code>DIV-8</code> should remain unchanged, and space will be traded between <code>DIV-7</code> and <code>DIV-9</code>.</li>
  <li><code>DIV-3/4/5/6/7/8/9</code> should have scrollbars rendered if the content is not completely visible.</li>
  <li>All this should be <em>PREFERABLY</em> done in CSS using <code>resize: horizontal/vertical</code> and <code>grid-template-cols: auto/minmax/min-content/max-content</code> etc, without any JavaScript.</li>
  </ol>
  <p>Please help me figure out if this is even possible using CSS alone. If not, please point me towards a JavaScript solution to this problem. I've tried and tested a lot of possibilities to achieve this layout using grid and flexboxes, nested up to 3 levels deep, without success. Please help me solve this problem. I'm sure I'll learn new things here. :)</p>
  <p>Thanks, Asim</p>