Gridlify

Gridlify is a zero-dependency tool to dynamically build a grid css layout, as well as dynamically positioning elements in to grid layouts with an easy-to-use API.

How to install

npm install gridlify

How to use

Import with ES6 modules
import { gridlify } from '/node_modules/gridlify/lib/index.js'

Set grid layout for html element
const myGrid = {
rows: ['200px', '500px', '500px', '200px'],
columns: ['1fr', '1fr', '1fr'],
rowGap: '5px',
columnGap: '5px'
}

gridlify.setGrid(myGrid, 'body')

Position a html element in the grid
const myPositions = {
startRow: 2,
endRow: 3,
startColumn: 1,
endColumn: 3
}

gridlify.setPosition(myPositions, '#childElement')

You can also change rows, columns and gap properties individually
gridlify.setRows(['20%', '20%', '60%'], '.parentElement')

gridlify.setColumns(['200px', 'min-content', 'auto'], '.parentElement')

gridlify.setRowGap('20px', '.parentElement')

gridlify.setColumnGap('10px', '.parentElement')

To get the CSS code for the layout, simply
const gridTemplate = gridlify.getGridCss(myGrid)
console.log(gridTemplate)

Output
{
display: grid;
grid-template-rows: 200px 500px 500px 200px;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 5px;
grid-column-gap: 5px;
}

const positionTemplate = gridlify.getPositionCss(myPositions)
console.log(positionTemplate)

Output
{ grid-area: 2 / 1 / 3 / 3; }

Note that gridlify uses the doucment.querySelector-API to select elements in the DOM.

• To manipulate elements by class, use the .-identifier.

• To manipulate elements by id, use the #-identifier.

CSS Measurements

As demonstrated in How to use, all input must be a string containing a non-negative number, followed by a valid CSS measurement.

Currently, the following CSS measurements are possible to use with gridlify

• px
• fr
• %

When setting row and column values, it is also possible to use specific sizing-keywords:

• auto
• min-content

Contributing

• Fork the project on Github.
• Run npm install to install dev dependencies.
• Implement/fix your feature, comment your code. Follow the code style of the project, including indentation.
• Implement tests for new feature.
• Run tests.
• Create a pull request.