nathancahill / split

Unopinionated utilities for resizeable split views
https://split.js.org/
MIT License
6.1k stars 448 forks source link

[Split-Grid] Gutters should be used in a two-dimensional way. #777

Open mockingjet opened 1 year ago

mockingjet commented 1 year ago

image

It's easy to create a 2x2 split blocks with split-grid.

But speaking of grid, it's expected to define gutter with two dimensions.

For example, these four blocks are expected to be split by four gutters, allowing top column gutter and bottom column gutter shits seperately.

import Split from 'split-grid'

Split({
    columnGutters: [{
        track: 1,
        span: [0,1], // from row 0 to row 1
        element: document.querySelector('.gutter-col-1'),
    }],
    columnGutters: [{
        track: 1,
        span: [1,2],
        element: document.querySelector('.gutter-col-2'),
    }],
    rowGutters: [{
        track: 1,
        span: [0,1], // from column 0 to column 1
        element: document.querySelector('.gutter-row-1'),
    }],
    rowGutters: [{
        track: 1,
        span: [1,2],
        element: document.querySelector('.gutter-row-2'),
    }]
})