A simple CSS Grid template parser
npm install --save grid-template-parser
import {grid} from 'grid-template-parser';
const areas = grid(`
"a a a b b"
"a a a b b"
". . c c c"
"d d d d d"
`);
// → {
// width: 5,
// height: 4,
// areas: {
// a: {
// column: {start: 1, end: 4, span: 3},
// row: {start: 1, end: 3, span: 2},
// },
// b: {
// column: {start: 4, end: 6, span: 2},
// row: {start: 1, end: 3, span: 2},
// },
// c: {
// column: {start: 3, end: 6, span: 3},
// row: {start: 3, end: 4, span: 1},
// },
// d: {
// column: {start: 1, end: 6, span: 5},
// row: {start: 4, end: 5, span: 1},
// },
// },
// }
import {template} from 'grid-template-parser';
const areas = template({
width: 5,
height: 4,
areas: {
a: {
column: {start: 1, end: 4, span: 3},
row: {start: 1, end: 3, span: 2},
},
b: {
column: {start: 3, end: 6, span: 3},
row: {start: 3, end: 5, span: 2},
},
},
});
// → `"a a a . ."
// "a a a . ."
// ". . b b b"
// ". . b b b"`
An helper is provided to declare areas more intuitively. The following example is equivalent to the previous:
import {template, area} from 'grid-template-parser';
const a = area({
x: 0,
y: 0,
width: 3,
height: 2,
});
const b = area({
x: 2,
y: 2,
width: 3,
height: 2,
});
const areas = template({
width: 5,
height: 4,
areas: {a, b},
});
// → `"a a a . ."
// "a a a . ."
// ". . b b b"
// ". . b b b"`
Parses a grid template and returns an object representation.
template
string The grid template to parse.
Grid An object representation of the grid template.
import {grid} from 'grid-template-parser';
const areas = grid(`
"a a a b b"
"a a a b b"
". . c c c"
"d d d d d"
`);
// → {
// width: 5,
// height: 4,
// areas: {
// a: {
// column: {start: 1, end: 4, span: 3},
// row: {start: 1, end: 3, span: 2},
// },
// b: {
// column: {start: 4, end: 6, span: 2},
// row: {start: 1, end: 3, span: 2},
// },
// c: {
// column: {start: 3, end: 6, span: 3},
// row: {start: 3, end: 4, span: 1},
// },
// d: {
// column: {start: 1, end: 6, span: 5},
// row: {start: 4, end: 5, span: 1},
// },
// },
// }
Builds a grid template from an object representation.
grid
Grid The grid to build.
string The equivalent grid template.
import {template} from 'grid-template-parser';
const areas = template({
width: 5,
height: 4,
areas: {
a: {
column: {start: 1, end: 4, span: 3},
row: {start: 1, end: 3, span: 2},
},
b: {
column: {start: 3, end: 6, span: 3},
row: {start: 3, end: 5, span: 2},
},
},
});
// → `"a a a . ."
// "a a a . ."
// ". . b b b"
// ". . b b b"`
Converts an area into a rect.
area
Area The area to convert.
Rect The equivalent rect.
import {rect} from 'grid-template-parser';
const r = rect({
column: {start: 1, end: 4, span: 3},
row: {start: 1, end: 3, span: 2},
});
// → {
// x: 0,
// y: 0,
// width: 3,
// height: 2,
// }
Converts a rect into an area.
rect
Rect The rect to convert.
Area The equivalent area.
import {area} from 'grid-template-parser';
const a = area({
x: 0,
y: 0,
width: 3,
height: 2,
});
// → {
// column: {start: 1, end: 4, span: 3},
// row: {start: 1, end: 3, span: 2},
// }
Finds the min column start of all grid areas.
grid
Grid The grid to analyze.
number The min column start.
import {grid, minColumnStart} from 'grid-template-parser';
const min = minColumnStart(grid(`
". . a a a"
". b b b b"
". . . c c"
`));
// → 2
Finds the max column start of all grid areas.
grid
Grid The grid to analyze.
number The max column start.
import {grid, maxColumnStart} from 'grid-template-parser';
const max = maxColumnStart(grid(`
". . a a a"
". b b b b"
". . . c c"
`));
// → 4
Finds the min column end of all grid areas.
grid
Grid The grid to analyze.
number The min column end.
import {grid, minColumnEnd} from 'grid-template-parser';
const min = minColumnEnd(grid(`
"a a . . ."
"b b b b ."
"c c c . ."
`));
// → 3
Finds the max column end of all grid areas.
grid
Grid The grid to analyze.
number The max column end.
import {grid, maxColumnEnd} from 'grid-template-parser';
const max = maxColumnEnd(grid(`
"a a . . ."
"b b b b ."
"c c c . ."
`));
// → 5
Finds the min row start of all grid areas.
grid
Grid The grid to analyze.
number The min row start.
import {grid, minRowStart} from 'grid-template-parser';
const min = minRowStart(grid(`
". . . ."
"a a . ."
"a a b b"
"a a b b"
`));
// → 2
Finds the max row start of all grid areas.
grid
Grid The grid to analyze.
number The max row start.
import {grid, maxRowStart} from 'grid-template-parser';
const max = maxRowStart(grid(`
". . . ."
"a a . ."
"a a b b"
"a a b b"
`));
// → 3
Finds the min row end of all grid areas.
grid
Grid The grid to analyze.
number The min row end.
import {grid, minRowEnd} from 'grid-template-parser';
const min = minRowEnd(grid(`
"a a b b"
"a a b b"
". . b b"
". . . ."
`));
// → 3
Finds the max row end of all grid areas.
grid
Grid The grid to analyze.
number The max row end.
import {grid, maxRowEnd} from 'grid-template-parser';
const max = maxRowEnd(grid(`
"a a b b"
"a a b b"
". . b b"
". . . ."
`));
// → 4
type Track = {
start: number,
end: number,
span: number,
};
type Area = {
row: Track,
column: Track,
};
type Rect = {
x: number,
y: number,
width: number,
height: number,
};
type Grid = {
width: number,
height: number,
areas: {[key: string]: Area},
};
MIT