css-grid-template-parser

A simple CSS Grid template parser

Installation

npm install --save css-grid-template-parser

Basic usage

Parse a grid template

import { grid } from 'css-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},
//     },
//   },
// }

Build a grid template

import { template } from 'css-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 'css-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

grid(template)

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

import { grid } from 'css-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.

Arguments

1. grid Grid The grid to build.

Returns

string The equivalent grid template.

Example

import { template } from 'css-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.

Arguments

1. area Area The area to convert.

Returns

Rect The equivalent rect.

Example

import { rect } from 'css-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.

Arguments

1. rect Rect The rect to convert.

Returns

Area The equivalent area.

Example

import { area } from 'css-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.

Arguments

1. grid Grid The grid to analyze.

Returns

number The min column start.

Example

import { grid, minColumnStart } from 'css-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.

Arguments

1. grid Grid The grid to analyze.

Returns

number The max column start.

Example

import { grid, maxColumnStart } from 'css-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.

Arguments

1. grid Grid The grid to analyze.

Returns

number The min column end.

Example

import { grid, minColumnEnd } from 'css-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.

Arguments

1. grid Grid The grid to analyze.

Returns

number The max column end.

Example

import { grid, maxColumnEnd } from 'css-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.

Arguments

1. grid Grid The grid to analyze.

Returns

number The min row start.

Example

import { grid, minRowStart } from 'css-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.

Arguments

1. grid Grid The grid to analyze.

Returns

number The max row start.

Example

import { grid, maxRowStart } from 'css-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.

Arguments

1. grid Grid The grid to analyze.

Returns

number The min row end.

Example

import { grid, minRowEnd } from 'css-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.

Arguments

1. grid Grid The grid to analyze.

Returns

number The max row end.

Example

import { grid, maxRowEnd } from 'css-grid-template-parser';

const max = maxRowEnd(
  grid(`
  "a a b b"
  "a a b b"
  ". . b b"
  ". . . ."
`)
);

// → 4

Types

Track

export interface Track {
  start: number;
  end: number;
  span: number;
}

Area

type Area = {
  row: Track;
  column: Track;
};

Rect

export interface Rect {
  x: number;
  y: number;
  width: number;
  height: number;
}

Grid

export interface Grid {
  width: number;
  height: number;
  areas: Record<string, Area>;
}

License

MIT