css-grid-template-parser
A simple CSS Grid template parser
Installation
npm install --save css-grid-template-parser
Basic usage
Parse a grid template
const areas = // → {// 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},// },// },// }
Build a grid template
const areas = // → `"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:
const a = const b = const areas = // → `"a a a . ."// "a a a . ."// ". . b b b"// ". . b b b"`
API
grid(template)
Parses a grid template and returns an object representation.
Arguments
template
string The grid template to parse.
Returns
Grid An object representation of the grid template.
Example
const areas = // → {// 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},// },// },// }
template(grid)
Builds a grid template from an object representation.
Arguments
grid
Grid The grid to build.
Returns
string The equivalent grid template.
Example
const areas = // → `"a a a . ."// "a a a . ."// ". . b b b"// ". . b b b"`
rect(area)
Converts an area into a rect.
Arguments
area
Area The area to convert.
Returns
Rect The equivalent rect.
Example
const r = // → {// x: 0,// y: 0,// width: 3,// height: 2,// }
area(rect)
Converts a rect into an area.
Arguments
rect
Rect The rect to convert.
Returns
Area The equivalent area.
Example
const a = // → {// column: {start: 1, end: 4, span: 3},// row: {start: 1, end: 3, span: 2},// }
minColumnStart(grid)
Finds the min column start of all grid areas.
Arguments
grid
Grid The grid to analyze.
Returns
number The min column start.
Example
const min = // → 2
maxColumnStart(grid)
Finds the max column start of all grid areas.
Arguments
grid
Grid The grid to analyze.
Returns
number The max column start.
Example
const max = // → 4
minColumnEnd(grid)
Finds the min column end of all grid areas.
Arguments
grid
Grid The grid to analyze.
Returns
number The min column end.
Example
const min = // → 3
maxColumnEnd(grid)
Finds the max column end of all grid areas.
Arguments
grid
Grid The grid to analyze.
Returns
number The max column end.
Example
const max = // → 5
minRowStart(grid)
Finds the min row start of all grid areas.
Arguments
grid
Grid The grid to analyze.
Returns
number The min row start.
Example
const min = // → 2
maxRowStart(grid)
Finds the max row start of all grid areas.
Arguments
grid
Grid The grid to analyze.
Returns
number The max row start.
Example
const max = // → 3
minRowEnd(grid)
Finds the min row end of all grid areas.
Arguments
grid
Grid The grid to analyze.
Returns
number The min row end.
Example
const min = // → 3
maxRowEnd(grid)
Finds the max row end of all grid areas.
Arguments
grid
Grid The grid to analyze.
Returns
number The max row end.
Example
const max = // → 4
Types
Track
Area
Rect
Grid
License
MIT