2x2 implementation/idea question

[jeremy-coleman]

Hi, love your work here. Do you have any guidance on how to implement a 2x2 grid where only the center point is draggable to handle the resizing?

kinda like this:

[GeoffCox]

I've been thinking about simultaneous multi-splits too (like for column headers in a table). Having a dynamic number of splits at once (not nested) is very difficult with my current pattern because the CSS grid definition would have to change dynamically.

In your 2x2 case, I think you could adapt the Split.tsx code pretty easily to do this.

1. Update the props and state to track both vertical and horizontal (e.g. primarySize => primaryHorizontalSize and primaryVerticalSize
2. Change SplitterSize to SplitterRadius
3. Update the onPointer functions to capture the X and Y start and calculate the new horizontal and vertical percents.
4. In the split.css you would get rid of the horizontal and vertical styles and replace them with a merged one where the grid-template-cols and grid-template-rows would both be set by the CSS variables.