The tool to overlap your website layout with a grid. It’s available for the most popular browser and as an npm package.
The most important features that make PixelGrid useful
Use grid, column and row layout with different alignment to make your layout as flexible as possible.
Choose convenient distribution model. You can either install it from NPM or use extension for popular browsers.
It’s possible to adapt layout to different resolution to use flexible mobile layouts.
See how it looks
There are extensions for most popular browsers
Use NPM package to integrate PixelGrid into your website
> npm install @sergeyzwezdin/pixelgridimport { initializeGrid } from ‘@sergeyzwezdin/pixelgrid’;
const presets = [{
grids: [
{
type: 'grid',
color: '#000000',
opacity: 0.25,
size: 8
}
}];
initializeGrid(presets);