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.
Gridlify is available as an npm package.
Visit the npm documention for more information about getting started with npm.
How to install
npm install gridlify
API
gridlify has the following methods available in it's public interface
getGridCss( {rows, columns, rowGap, columnGap} )
- Generates CSS code for a grid layout based on input values.
- Takes an object as an argument. The object must contain the following information:
- rows - An array of the row values the grid should contain.
- columns - An array of the column values the grid should contain.
- rowGap: A string, representing the gap between the rows in the grid.
- columnGap: A string, representing the gap between the columns in the grid.
getPositionCss ({ startRow, endRow, startColumn, endColumn }
- Generates CSS code for an elements position inside a grid layout layout based on input values.
- Takes an object as an argument. The object must contain the following information:
- startRow - A number representing the starting row coordinate in the grid layout.
- endRow - A number representing the ending row coordinate in the grid layout.
- startColumn - A number representing the starting column coordinate in the grid layout.
- endColumn - A number representing the ending column coordinate in the grid layout.
setGrid ({ rows, columns, rowGap, columnGap }, htmlIdentifier)
- Sets the grid layout properties for an HTML element in the DOM.
- Takes an object as its first argument. The object must contain the following information:
- rows - An array of the row values the grid should contain.
- columns - An array of the column values the grid should contain.
- rowGap: A string, representing the gap between the rows in the grid.
- columnGap: A string, representing the gap between the columns in the grid.
- Takes a htmlIdentifier as its second argument.
- The HTML identifier is a string that represents an html element in the DOM.
- As an example, the
<body>-element, becomes'body'.
setPosition ({ startRow, endRow, startColumn, endColumn }, htmlIdentifier)
- Positions an html element inside the grid layout based on input values.
- Takes an object as an argument. The object must contain the following information:
- startRow - A number representing the starting row coordinate in the grid layout.
- endRow - A number representing the ending row coordinate in the grid layout.
- startColumn - A number representing the starting column coordinate in the grid layout.
- endColumn - A number representing the ending column coordinate in the grid layout.
- Takes a htmlIdentifier as its second argument.
- The HTML identifier is a string that represents an html element in the DOM.
- As an example, this
<div id="myDiv"></div>element, becomes'#myDiv'.
setRows (rows, htmlIdentifier)
- Sets the rows only for an HTML element that has a grid layout.
- Takes an array of string as its first argument. The array of strings represents the rows to be set for the grid layout.
- The HTML identifier is a string that represents an html element in the DOM.
setColumns (rows, htmlIdentifier)
- Sets the columns only for an HTML element that has a grid layout.
- Takes an array of string as its first argument. The arraysof strings represents the columns to be set for the grid layout.
- The HTML identifier is a string that represents an html element in the DOM.
setRowGap (gap, htmlIdentifier)
- Sets the row gap only for an HTML element that has a grid layout.
- Takes an string as its first argument. The string represents the gap between the rows in the grid.
setColumnap (gap, htmlIdentifier)
- Sets the row gap only for an HTML element that has a grid layout.
- Takes an string as its first argument. The string represents the gap between the columns in the grid.
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)
Generates the following CSS Code
{
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)
Generates the following CSS Code
{ grid-area: 2 / 1 / 3 / 3; }
Note that gridlify uses the document.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
Resources
For more information about grid layouts, visit W3Schools
For more information about NPM and getting started with npm packages, visitnpm.
Contributing
- Fork the project on Github.
- Run
npm installto 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.