Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mockingjet opened this issue Jan 18, 2023 · 0 comments
Open

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

mockingjet opened this issue Jan 18, 2023 · 0 comments

Comments

@mockingjet
Copy link

mockingjet commented Jan 18, 2023

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'),
    }]
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant