To use this component simple drag one of the webblocks to your screen.

By default we have 2 webblocks provided:

One for 2 horizontal columns and another for 2 vertical rows.

You can use the placeholders to put whathever you want inside it, and they will be resizable containers.

Using the input parameters you can select the initial sizes in various formats, like '%', 'px' or 'fr'. Just make sure both sizes uses the same unit:

you can also define the size of the separator and give a security margin to make it easier to drag.

You should be able to use nested webblocks to create your own structure.
But if you need more complex scenarios you can extend the component implementing your own webblock and reusing the actions provided:

check the github docs on how to use it for more advanced scenarios if you need: https://github.com/nathancahill/split/tree/master/packages/split-grid#example

There is also this fiddle to experiment:
https://jsfiddle.net/oskar/rcqkox3t/



Included in this new version events that will be triggeredwhen the block is resized