Official website: https://pixelgrid.zwezdin.com

Usage no npm install needed!

<script type="module">
  import sergeyzwezdinPixelgrid from 'https://cdn.skypack.dev/@sergeyzwezdin/pixelgrid';



Official website: https://pixelgrid.zwezdin.com

Build Status NPM

The tool to overlap your website layout with a grid. It’s available for the most popular browser and as an npm package.


There are two options on how to use PixelGrid — install the package via NPM or use a browser extension.


Use NPM when you want to integrate PixelGrid into your website and control the moment when you want to display the grid on your own.

It could be useful for cases when you don't want to install the browser extension, or there is no extension for your particular browser.

  1. Install the package:
> npm install @sergeyzwezdin/pixelgrid
  1. Add layout grid to your website
import { initializeGrid } from ‘@sergeyzwezdin/pixelgrid’;

const presets = [{
        grids: [
            type: 'grid',
            color: '#000000',
            opacity: 0.2,
            size: 8


Browser extensions

If you don't want to mess up your website with additional packages, it could be a good option to use browser extension instead. In this case, you don't need to integrate anything into your website sources. You have to install a browser extension instead.

For the moment following browser extensions are supported:

  1. Google Chrome
  2. Mozilla Firefox
  3. Opera browser
  4. Yandex browser


  1. Getting started
  2. Layout type
  3. Responsive layout


If you have any problems while using PixelGrid, feel free to submit an issue or feature request here.

If you want to help with development, feel free to create Pull Request for your changes. Any improvements are very appreciated. To get more information, please read the Contribution Guidelines.


PixelGrid is released under the MIT License.