Jss-grid NPM | npm.io

jss-grid

Makes CSS Grid code readable by giving it a visual syntax.

100% native Javascript, no dependencies.

Install

npm install --save jss-grid

yarn add jss-grid

Usage

Import the grid() function.
Spread ... the return value of grid() in the desired JSS class.
Sketch your grid in a `template literal` string.
- Columns use | | (pipe) delimiters
- Rows use -- (dash) delimiters.
- Gaps use { } (curly braces).
- The entire sketch must be wrapped in `` , normal strings aren't multiline.

import grid from 'jss-grid'

const styles = {
  className: {
    background: '#eee',
    ...grid(
      `
      {1em, 2em} | 1fr | 8fr | 1fr |
      --
      15fr
      --
      1fr
      --
      `
    )
  }
}

NOTE: You can add any # of columns/rows (of the same size) by adding n followed by a factor inside a column or row definition.

Reference

...grid()

grid() returns an object, therefore you must spread the result of the function call in your JSS.

grid()

( sketch ) => gridProperties

( template literal string ) => object

Takes sketch `template literal` and returns object of CSS/JSS grid properties.

Do not call grid() with (multiple) normal strings.

sketch

{row gap, column gap} | column | column | column | column |
--
row
--
row
--

Whitespace and line breaks don't matter.

But each group of definitions (gaps, columns and rows) must begin and end with their respective delimiters. In other words, don't forget to place |, --, { and } and their correct positions.

Example.

This template string literal

{1em, 2em} | 1fr | 8fr | 1fr |
--
15fr
--
1fr
--

creates these JSS properties

'grid-template-columns': '1fr 8fr 1fr',
'grid-template-rows': '15fr 1fr',
'grid-row-gap': '1em',
'grid-column-gap': '2em',

Multiple columns or rows of the same size

You can add multiple columns/rows of the same size by adding n followed by a integer factor inside a column or row definition.

1em n 8 will add 8 columns/rows of 1em.

The proper order of columns/rows before and after multiplication is maintained.

The following example

{5%} | 1fr | 2fr n 11 |
--
1fr n 10
--
2fr
--

produces

'grid-template-columns': '1fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr',
'grid-template-rows': '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr',
'grid-gap': '5%',