split icon indicating copy to clipboard operation
split copied to clipboard

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

Open mockingjet opened this issue 3 years ago • 0 comments

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'),
    }]
})

mockingjet avatar Jan 18 '23 12:01 mockingjet