grid-template-parser 

A simple CSS Grid template parser

Installation

``
npm install --save grid-template-parser
`

Basic usage

$3

`js
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},
// },
// },
// }
`

$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 . ."
// "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:

`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 . ."
// "a a a . ."
// ". . b b b"
// ". . b b b"
`

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(
"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},
// },
// },
// }
`

---

$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 . ."
// "a a a . ."
// ". . b b b"
// ". . b b b"
`

---

$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(
". . a a a"
". b b b b"
". . . c c"
));

// → 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(
". . a a a"
". b b b b"
". . . c c"
));

// → 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(
"a a . . ."
"b b b b ."
"c c c . ."
));

// → 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(
"a a . . ."
"b b b b ."
"c c c . ."
));

// → 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(
". . . ."
"a a . ."
"a a b b"
"a a b b"
));

// → 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(
". . . ."
"a a . ."
"a a b b"
"a a b b"
));

// → 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(
"a a b b"
"a a b b"
". . b b"
". . . ."
));

// → 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(
"a a b b"
"a a b b"
". . b b"
". . . ."
));

// → 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},
};
``

License

MIT