Grid Helper

NPM package for creating a grid overlay.

Installation

Install package:

npm i @thomascoppein/grid-helper

Import package in Javascript file:

import GridHelper from '@thomascoppein/grid-helper';

How to use

const GridHelper = new GridHelper();

Options

property	default
gutter	'30px'
gutterMobile	'16px'
columns	12
columnsMobile	4
columnsColor	'#ffcfdf'
zIndex	9999999
containerMaxWidth	'80vw'
containerPadding	'10vw'
containerPaddingMobile	'16px'
mobileBreakpoint	'375px'

const GridHelper = new GridHelper({
  gutter: '50px',
  gutterMobile: '20px',
  columns: 12,
  columnsMobile: 4,
  columnsColor: '#000000',
  zIndex: 999999,
  containerMaxWidth: '1600px',
  containerPadding: '5vw',
  containerPaddingMobile: '3vw',
  mobileBreakpoint: '600px',
});

How to enable

Use the key-combination CTRL + G to toggle the helper.