
Security News
Meet Socket at Black Hat and DEF CON 2025 in Las Vegas
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
grid-template-parser
Advanced tools
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"`
grid(template)
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},
// },
// },
// }
template(grid)
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"`
rect(area)
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,
// }
area(rect)
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},
// }
minColumnStart(grid)
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
maxColumnStart(grid)
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
minColumnEnd(grid)
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
maxColumnEnd(grid)
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
minRowStart(grid)
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
maxRowStart(grid)
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
minRowEnd(grid)
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
maxRowEnd(grid)
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
Track
type Track = {
start: number,
end: number,
span: number,
};
Area
type Area = {
row: Track,
column: Track,
};
Rect
type Rect = {
x: number,
y: number,
width: number,
height: number,
};
Grid
type Grid = {
width: number,
height: number,
areas: {[key: string]: Area},
};
MIT
FAQs
A simple CSS Grid template parser
The npm package grid-template-parser receives a total of 8,018 weekly downloads. As such, grid-template-parser popularity was classified as popular.
We found that grid-template-parser demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.