A simple CSS Grid template parser
npm install grid-template-parser
npm install --save grid-template-parser
`
Basic usage
$3
`js
import {grid} from 'grid-template-parser';
const areas = grid(
);
// → {
// 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},
// },
// },
// }
`
$3
`js
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 . ."
`
An helper is provided to declare areas more intuitively. The following example is equivalent to the previous:
`js
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 . ."
`
API
$3
Parses a grid template and returns an object representation.
#### Arguments
1. template string The grid template to parse.
#### Returns
Grid An object representation of the grid template.
#### Example
`js
import {grid} from 'grid-template-parser';
const areas = grid(
);
// → {
// 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},
// },
// },
// }
`
---
$3
Builds a grid template from an object representation.
#### Arguments
1. grid Grid The grid to build.
#### Returns
string The equivalent grid template.
#### Example
`js
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 . ."
`
---
$3
Converts an area into a rect.
#### Arguments
1. area Area The area to convert.
#### Returns
Rect The equivalent rect.
#### Example
`js
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,
// }
`
---
$3
Converts a rect into an area.
#### Arguments
1. rect Rect The rect to convert.
#### Returns
Area The equivalent area.
#### Example
`js
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},
// }
`
---
$3
Finds the min column start of all grid areas.
#### Arguments
1. grid Grid The grid to analyze.
#### Returns
number The min column start.
#### Example
`js
import {grid, minColumnStart} from 'grid-template-parser';
const min = minColumnStart(grid(
));
// → 2
`
---
$3
Finds the max column start of all grid areas.
#### Arguments
1. grid Grid The grid to analyze.
#### Returns
number The max column start.
#### Example
`js
import {grid, maxColumnStart} from 'grid-template-parser';
const max = maxColumnStart(grid(
));
// → 4
`
---
$3
Finds the min column end of all grid areas.
#### Arguments
1. grid Grid The grid to analyze.
#### Returns
number The min column end.
#### Example
`js
import {grid, minColumnEnd} from 'grid-template-parser';
const min = minColumnEnd(grid(
));
// → 3
`
---
$3
Finds the max column end of all grid areas.
#### Arguments
1. grid Grid The grid to analyze.
#### Returns
number The max column end.
#### Example
`js
import {grid, maxColumnEnd} from 'grid-template-parser';
const max = maxColumnEnd(grid(
));
// → 5
`
---
$3
Finds the min row start of all grid areas.
#### Arguments
1. grid Grid The grid to analyze.
#### Returns
number The min row start.
#### Example
`js
import {grid, minRowStart} from 'grid-template-parser';
const min = minRowStart(grid(
));
// → 2
`
---
$3
Finds the max row start of all grid areas.
#### Arguments
1. grid Grid The grid to analyze.
#### Returns
number The max row start.
#### Example
`js
import {grid, maxRowStart} from 'grid-template-parser';
const max = maxRowStart(grid(
));
// → 3
`
---
$3
Finds the min row end of all grid areas.
#### Arguments
1. grid Grid The grid to analyze.
#### Returns
number The min row end.
#### Example
`js
import {grid, minRowEnd} from 'grid-template-parser';
const min = minRowEnd(grid(
));
// → 3
`
---
$3
Finds the max row end of all grid areas.
#### Arguments
1. grid Grid The grid to analyze.
#### Returns
number The max row end.
#### Example
`js
import {grid, maxRowEnd} from 'grid-template-parser';
const max = maxRowEnd(grid(
));
// → 4
`
Types
$3
`js
type Track = {
start: number,
end: number,
span: number,
};
`
$3
`js
type Area = {
row: Track,
column: Track,
};
`
$3
`js
type Rect = {
x: number,
y: number,
width: number,
height: number,
};
`
$3
`js
type Grid = {
width: number,
height: number,
areas: {[key: string]: Area},
};
``